Premiers problèmes de plug-in jQuery

Question

Hé les gars, d'abord, laissez-moi juste dire que je suis un noob jQuery! Je veux faire un simple plugin qui renseigne automatiquement un élément de sélection html, il fonctionne bien sur le premier élément, mais lorsque je l'appelle à nouveau pour remplir une seconde, il n'ajoute rien. Voici mes appels dans l'onglet ajax où #product et # new-category 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 plugin:

(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);

Étrangement si je change de deuxième appel de fonction $ ("# nouvelle catégorie"). popSelect ("catégories"); à $ ("[id ^ =" nouvelle catégorie "]"). popSelect ("catégories"); ça marche alors, y at-il un problème avec mon sélecteur?

Merci pour toute aide!

Answer 1

Je viens de répondre à une question similaire, en gros vous ne pouvez pas avoir deux éléments avec le même identifiant sur la même page , cela cause exactement ce problème. Vous devrez utiliser une classe ou modifier l'un des identifiants.

Answer 2

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

Answer 3

Ok, 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 ne remplit que la première sélection, même réponse dans IE. Curieux, même ajouter un " attendre " fonction entre les appels et il n'a rien fait. Avoir la balise id == nom est-il correct? Quelque chose que je viens de remarquer, en remplaçant & id; id = 'new-category' " avec " id = 'newwcategory' " ça marche !? y at-il quelque chose qui ne va pas avec "-" dans les identifiants?

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

Answer 4

J'ai depuis établi qu'il s'agissait d'un problème avec les onglets de l'interface utilisateur jQuery car le plug-in fonctionnait parfaitement sans eux! Les éléments de l'onglet actuellement sélectionné ne sont pas renseignés si l'onglet précédemment sélectionné comportait un élément du même type. id. Exemple:

premier onglet:

<select id="new_category" name="new_category">

     <option value="">Select Category</option>
</select>

Deuxième onglet:

<select id="product" name="product">
      <option value="">Select Product</option>
</select>

<select id="new_category" name="new_category">
      <option value="">Select Category</option>
</select>

Troisième onglet:

<select id="product" name="product">
      <option value="">Select Product</option>
</select>

Aller de l'onglet 1 à l'onglet 2 - le produit sera rempli mais pas nouvelle catégorie et allant de l'onglet 2 à l'onglet 3 - le produit ne sera pas rempli ...

i.e. si un élément avec un id équivalent à un onglet précédent existe dans la onglet actuel, il ne sera pas renseigné et (éventuellement?) de l'onglet précédent L'élément sera bien que je ne puisse pas le voir car il n'est pas chargé. J'ai essayé de bidouiller avec le cache mais ça n'aide pas, en spécifiant l'identifiant du formulaire comme son parent devrait résoudre ce problème, mais pourquoi est-il nécessaire, Les onglets ne devraient-ils pas être indépendants?