Les premiers problèmes de plugin jQuery

Question

Hé les gars, d'abord laissez-moi juste dire Im un jQuery noob! Je veux faire un simple plugin qui remplit automatiquement un élément de sélection html, ça marche bien sur le premier élément mais quand je l'appelle à nouveau pour remplir une seconde il n'apporte rien. Voici mes appels dans l'onglet ajax où #product et # new-catégorie sont les éléments select:

$(function(){ 

    $("#product").popSelect("products"); 

    $("#new-category").popSelect("categories"); 

}); 

HTML:

><select id="product" name="product"> 
>  < option value="">Select Product</option>     
></select >  
><select id="new-category" name="new-category"> 
>  < option value="">Select Category< /option>     
></select > 

Et voici le plug-in:

(function(jQuery){ 
jQuery.fn.popSelect = function(table) { 

    return jQuery(this).each(function(){    

     var obj = jQuery(this); 

     if(this.nodeName.toLowerCase() == 'select'){ 
      jQuery.getJSON("../app/modules/ajax/json.php", { table:table }, 
       function(data){     
        var options = '';   
        jQuery.each(data, function(i,item){           
         options += '<option value="' + item.id + '">' + item.title + '</option>';     
        });     
        obj.append(options);     
       });  
     }; 
    }); 
}; 
})(jQuery); 

Bizarrement, si je change la deuxième fonction appelez $("#new-category").popSelect("categories"); à $("[id^='new-category']").popSelect("categories"); il fonctionne alors très bien, y at-il ething mal avec mon sélecteur?

Merci pour toute aide!

Answer 1

Je viens de répondre à une question similaire, fondamentalement you can't have two elements with the same ID on the same page, il provoque ce problème. Vous devrez utiliser une classe ou changer l'un des ID.

Answer 2

Je n'ai pas de réponse directe mais il semblerait que vous ayez 2 appels ajax actifs en cours en même temps, ce qui pourrait conduire à une certaine étrangeté?

Answer 3

Alors quelque chose comme ça?

(function($){ 
jQuery.fn.popSelect = function(table) { 

    return $(this).each(function(){   

     var obj = $(this); 

     if(this.nodeName.toLowerCase() == 'select'){ 
      obj.queue("fx", function(){$.getJSON("../app/modules/ajax/json.php", { table:table }, 
       function(data){     
        var options = '';   
        $.each(data, function(i,item){           
         options += '<option value="' + item.id + '">' + item.title + '</option>';     
        });    
        obj.append(options);     
       }); }); 
     }; 
    });};})(jQuery); 

Je n'obtiens aucune erreur mais il remplit seulement la première sélection, même réponse dans IE. Puzzling, même ajouter une fonction "wait" entre les appels et il n'a rien fait. Est-ce que le tag id == name tag est correct? Quelque chose que je viens de remarquer, en remplaçant "id = 'new-category'" par "id = 'newwcategory'" le fait fonctionner !? Y at-il quelque chose qui ne va pas avec "-" dans ids?

Merci encore pour toute l'aide jusqu'à présent!

Answer 4

Ok J'ai depuis établi qu'il s'agit d'un problème avec les onglets de l'interface utilisateur jQuery car le plugin fonctionne parfaitement sans eux!Les éléments de l'onglet sélectionné ne coûtent pas être renseigné si l'onglet sélectionné précédemment avait un élément du même id par exemple:

premier onglet:

< select id = « new_category » name = « new_category » > < option value = ""> Sélectionner la catégorie

Deuxième Tab:

< select id = nom "produit" = "produit"> < option value = ""> Sélectionner un produit </option> </select>

< select id = "" name = "new_category new_category "> < option value =" "> sélectionner la catégorie </option> </select>

Thrid Tab:

< select id = nom "produit" = "produit"> < option value = ""> Sélectionner un produit </option> </select>

Allant de Tab 1 à l'onglet 2 - produit sera peuplé mais pas new_category et allant de tab 2 à l'onglet 3 - produit ne sera pas peuplée ...

-à-dire si un élément avec un équivalent identifiant à un onglet précédent existe dans l'onglet en cours , il ne sera pas peuplé et (possib ly?) l'élément précédent sera bien que je ne peux pas voir cela car il n'est pas chargé. Ive essayé de violer avec cache, mais il n'aide pas, en spécifiant l'ID de formulaire que son parent devrait résoudre ce problème, mais pourquoi est-il nécessaire, ne devrait pas les onglets être indépendant?

Merci pour toute information à ce sujet!