Déclenchement de l'appel ajax pour la liste déroulante dépendante

Question

Comment déclencher l'appel ajax à partir de jquery? Si je mets dans le script $ ("select # country_id"). Prop ("selectedIndex", idx); et POS :: END il va avant jquery pour dropdownlist. Je dois sélectionner un élément de la liste déroulante et une autre liste remplir avec des données.

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

Merci ernie, aidez-moi avec ce code. Votre code essayant de sélectionner (du même ddl) quelque chose après avoir sélectionné un élément de la liste déroulante. J'écris quelque chose de similaire et cela fonctionne. Tout est sur la sélection de la valeur sur la page de chargement, puis je reçois deuxième ddl peuplé.

<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> 

Answer 2

Ai-je raison de comprendre que vous voulez sélectionner l'article après avoir mis à jour la liste déroulante? Donc, tout d'abord, vous avez écrit votre déclencheur jQuery manuellement et en utilisant dropDownList. Vous devriez choisir l'un ou l'autre. Ma réponse va supposer que vous écrivez le javascript manuellement, mais cela pourrait tout aussi bien être placé dans le tableau ajax pour passer à dropDownList.

Vous avez raison de dire que votre jQuery en cours s'exécute avant l'AJAX que vous essayez d'exécuter. idx peut être défini à l'avance, mais la définition de l'option sélectionnée doit être effectuée une fois la liste déroulante remplie, ce qui explique pourquoi nous déplaçons cette option dans votre fonction de réussite. La façon dont vous l'avez actuellement (dans le $(function(){), place ce bloc de script dans le document prêt - $(function(){ est vraiment raccourci pour $(document).ready(function() {, ce qui signifie que tout script dans cette fonction sera exécuté lorsque le document est prêt (pas lorsque vous avez mis à jour le DOM en utilisant AJAX). Les détails sur la sténographie peuvent être lus dans les docs, juste avant la section Rate Me: Using AJAX.

Pour obtenir votre javascript pour travailler comme vous le souhaitez, supprimer le premier bloc <script> et changer la seconde à quelque chose comme:

<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> 

Notez que cela ne fonctionnera que si $smth est vraiment l'indice de l'option dans la liste déroulante vous peupler. Personnellement, si je faisais cela, au lieu d'utiliser prop(), j'utiliserais attr() et la valeur de la liste déroulante, car c'est un peu plus facile à suivre qu'un index, et faire quelque chose comme ceci:

<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> 

Plus probablement, je ferais ce côté serveur dans le PHP et assurez-vous que le code HTML je passais de retour pour la liste déroulante avait déjà l'option appropriée sélectionnée.