La liste générée par DB ne fonctionne pas lorsqu'elle est créée en utilisant jquery

Question

J'ai un formulaire simple qui a une liste (liste déroulante générée à partir d'une BD), quand un utilisateur fait une sélection, la sélection est imprimée sur l'écran. Le problème que j'ai est que si j'utilise jquery pour appeler la fonction php qui génère la liste quand la page est en chargement, la liste ne fonctionnera pas, mais si j'ajoute le code directement dans le html cela fonctionnera

Quand la page charge la liste déroulante est appelée comme ceci:

 

$('#createDropDown').ready(function(){ 
     id = $('#createDropDown').val();  
     // this calls a php function that creates a dropdown list from the DB 
     // the dropdown's id = 'categoryList' 
     xajax_addDropdownMenu(id);
 

}); 

la liste est générée avec l'id = « CatégorieListe », et il est ajouté correctement au createDropDown DIV appelé « createDropDown ». Jusqu'à maintenant tout semble bon! Le problème vient quand une sélection est faite sur la liste nouvellement créée (CatégorieListe) un autre Jquery est appelé

lorsqu'une sélection est effectuée le code suivant doit être appelé:

 

$('#categoryList').change(function() { 
    bucket_id = $('#categoryList').val();  
    var selected = ""; 
    // get selected value from the dropdown menu 
     $("#categoryList option:selected").each(function() { 
      selected += $(this).text() + " ===>"; 
     }); 
     // if we have a valid ID print it in the screen. 
     if(bucket_id!= 0) 
     { 
      xajax_addCategory(selected); 
     } 
    }); 

xajax_addCategory (sélectionné); imprime l'élément sélectionné à l'écran. mais ne fonctionne pas.

NOTE: Cela fonctionne bien si j'appelle la fonction php pour générer la liste déroulante directement dans le fichier main.html, donc je sais que la liste est générée avec l'ID correct et cela fonctionne, mais quand j'utilise Jquery pour appelle la méthode php en charge, ça ne marche pas ... et je ne comprends pas pourquoi.

PS Je suis un natif de Jquery, donc quelques idées seraient les bienvenues!

---

MISE À JOUR:

J'ai essayé de créer une reliure après la liste est générée comme ceci:

$('#createDropDown').ready(function() 
    { 
     id = $('#createDropDown').val(); 
     xajax_addDropdownMenu(id); 
     $("#categoryList0").bind('change',function() 
     { 
      console.log('The code goes here!!'); 
     }); 
    }); 

où categoryList0 est l'ID de la nouvelle liste. la classe de la liste est CatégorieListe

mais je suis toujours bloqué, car il est toujours pas entrer dans la fonction quand il y a un changement ...

Answer 1

Votre deuxième extrait de code trouve tous les éléments qui correspondent à #categoryList et lie une fonction à l'événement change. Le problème est qu'il n'y a pas d'élément #categoryList à ce moment, puisque vous le créez plus tard. Ainsi vous devez faire la liaison après que la liste ait été créée.

Answer 2

J'ai trouvé un moyen de faire une liaison plus tard en utilisant xajax. Pour une raison quelconque nulle part dans le fichier jquery, j'ai été capable de lier cette fonction avec le nouveau menu déroulant. Ma solution a été d'ajouter le scrip jquery en utilisant xajaxResopnse-> addScript (script) dans le addDropdownMenu funciton comme celui-ci

fonction

addDropdownMenu ($ id) {

$xajaxResponse = new xajaxResponse(); 

    $html = /* CODE TO GENERATE LIST HERE */ ; 


    $javascript = /*"*///commented out " to visualize code better 
    $('#categoryList').bind('change',function categoryListChange() 
    { 
      
     //get selected value from the dropdown menu 
     var selected = ""; 
     $("#categoryList option:selected").each(function() 
     { 
     selected += $(this).text(); 
     }); 

     bucketId = $('#categoryList').val();  

     if(bucketId!= 0) 
     { 
     xajax_addCategory(selected); 
     } 

    });""; 

    $xajaxResponse->addAppend("categoryListContainer", "innerHTML", $html); 

    $xajaxResponse->addScript($javascript); 

    return $xajaxResponse; 

} 

faire d'abord une liaison pour la nouvelle liste . comme ce $ ('# CatégorieListe') se lient ('changement', la fonction categoryListChange() {...} puis ajouter le script jquery par $ xajaxResponse-> addScript ($ javascript).