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

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>