Trigger ajax call for dependent dropdownlist

Question

How do I trigger ajax call from jquery? If I set in script $("select#country_id").prop("selectedIndex", idx); and POS::END it goes before jquery for dropdownlist. I need to select some item from dropdownlist and another list fill with data.

    echo CHtml::dropDownList('country_id','', array(1=>'USA',2=>'France',3=>'Japan'),
       array(
        'ajax' => array(
          'type'=>'POST', //request type
          'url'=>CController::createUrl('currentController/dynamiccities'), 
          'update'=>'#city_id', //selector to update
    ))); 

   empty since it will be filled by the other dropdown
   echo CHtml::dropDownList('city_id','', array());



 <script type="text/javascript">

 $(function(){

  var idx = "<?php echo $smth ?>";
  $("select#country_id").prop("selectedIndex", idx);

 }) 

</script>


<script type="text/javascript">
  /*<![CDATA[*/
  jQuery(function($) {
  jQuery('a.tooltip').tooltip({'placement':'bottom'});
  jQuery('a[rel="popover"]').popover();
  $('body').on('change','#country_id',function(){jQuery.ajax({'type':'POST','url':'/currentController/dynamiccities','cache':false,'data':jQuery(this).parents("form").serialize(),'success':function(html){jQuery("#city_id").html(html)}});return false;});
  });
  /*]]>*/
</script>

Answer 1

Am I correct in understanding that you want to select the item after you update the dropdown?

So, first things first, as you've written your jQuery trigger manually and using dropDownList. You should pick one or the other. My answer is going to assume you're writing the javascript manually, but this could just as easily be placed in the ajax array to pass to dropDownList.

You're correct that your current jQuery is executing before the AJAX you're trying to execute. idx can be set ahead of time, but setting the selected option has to be done after the dropdown is populated, which is why we move this into your success function. The way you currently have it (in the $(function(){), places that script block in the document ready - $(function(){ is really shorthand for $(document).ready(function() {, meaning any script in that function will run when the document is ready (not when you've updated the DOM using AJAX). Details about the shorthand can be read about in the docs, right before the Rate Me: Using AJAX section.

To get your javascript to work as desired, remove the first <script> block and change the second to something like:

<script type="text/javascript">
  /*<![CDATA[*/
  var idx = "<?php echo $smth ?>";
  jQuery(function($) {
  jQuery('a.tooltip').tooltip({'placement':'bottom'});
  jQuery('a[rel="popover"]').popover();
  $('body').on('change','#country_id',
    function(){
        jQuery.ajax({'type':'POST',
                     'url':'/currentController/dynamiccities',
                     'cache':false,
                     'data':jQuery(this).parents("form").serialize(),
                     'success': function(html){
                                    jQuery("#city_id").html(html);
                                    jQuery("#country_id").prop("selectedIndex", idx);
                                }

                    });
        return false;});
  });
  /*]]>*/
</script>

Note that this will only work if $smth really is the index of the option in the dropdown you're populating.

Personally, if I were doing this, instead of using prop(), I'd use attr() and the value of the dropdown, as that's a bit easier to keep track of than an index, and do something like this:

<script type="text/javascript">
  /*<![CDATA[*/
  jQuery(function($) {
  jQuery('a.tooltip').tooltip({'placement':'bottom'});
  jQuery('a[rel="popover"]').popover();
  $('body').on('change','#country_id',
    function(){
        jQuery.ajax({'type':'POST',
                     'url':'/currentController/dynamiccities',
                     'cache':false,
                     'data':jQuery(this).parents("form").serialize(),
                     'success': function(html){
                                    jQuery("#city_id").html(html);
                                    var selectedCountry = "#country_id option[value='" + <?php echo $countryID ?> + "']";
                                    jQuery(selectedCountry).attr('selected', 'selected');
                                }

                    });
        return false;});
  });
  /*]]>*/
</script>

More likely, I'd do this server side in the PHP and make sure that the HTML I was passing back for the dropdown already had the proper option selected.

Answer 2

Thanks ernie, you help me with this code. Your code trying to select (from the same ddl) something after I select some item from dropdowlist. I write something similar and it works. Whole thing is about selecting value on load page, and then I get second ddl populated.

<script type="text/javascript">
  /*<![CDATA[*/
  var idx = "<?php echo $smth ?>";
  jQuery(function($) {
  jQuery('a.tooltip').tooltip({'placement':'bottom'});
  jQuery('a[rel="popover"]').popover();
  $('body').on('change','#country_id',
    function(){
        jQuery.ajax({'type':'POST',
                     'url':'/currentController/dynamiccities',
                     'cache':false,
                     'data':jQuery(this).parents("form").serialize(),
                     'success': function(html){
                                    jQuery("#city_id").html(html);
                                }

                    });
        return false;});

   if (idx!="")
   {
    jQuery("#country_id").prop("selectedIndex", idx);
    $('#country_id').trigger('change');
   }

  });
  /*]]>*/
</script>