Primeros problemas con el plugin de jQuery

Question

Hola chicos, primero, permítanme decirles que soy un jQuery noob! Quiero hacer un complemento simple que rellene automáticamente un elemento de selección html, funciona bien en el primer elemento, pero cuando lo llamo de nuevo para rellenar un segundo, no agrega nada. Aquí están mis llamadas en la pestaña ajax donde #product y # new-category son los elementos seleccionados:

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

Y aquí está el complemento:

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

Extrañamente si cambio la segunda llamada de función $ (" # new-category "). popSelect (" categories "); para $ (" [id ^ = 'new-category'] "). popSelect (" categories "); entonces funciona bien, ¿hay algún problema con mi selector?

¡Gracias por cualquier ayuda!

Answer 1

Acabo de responder una pregunta similar, básicamente no puedes tener dos elementos con el mismo ID en la misma página , causa este problema exacto. Tendrá que usar una clase o cambiar una de las ID.

Answer 2

No tengo una respuesta directa, pero parece que tendrás 2 llamadas activas ajax pendientes al mismo tiempo, lo que podría dar lugar a cierta extrañeza.

Answer 3

Ok, ¿algo como esto?

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

No obtengo errores, pero aún así solo llena la primera selección, la misma respuesta en IE. Desconcertante, incluso agregue un " espera " Funciona entre llamadas y no hizo nada. ¿Es correcto tener la etiqueta de identificación == etiqueta de nombre? Algo que acabo de notar, reemplazando " id = 'nueva categoría' " con " id = 'newwcategory' " hace que funcione? ¿Hay algún error con " - " 's en IDs?

Gracias de nuevo por toda la ayuda hasta ahora!

Answer 4

Desde entonces he establecido que este es un problema con las pestañas jQuery UI, ya que el complemento funciona perfectamente sin ellas. Los elementos de la pestaña seleccionada actualmente no se rellenan si la pestaña seleccionada anteriormente tenía un elemento de la misma carné de identidad. Ejemplo:

primera pestaña:

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

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

Segunda pestaña:

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

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

Tercera pestaña:

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

Pasando de la Pestaña 1 a la Pestaña 2: el producto se llenará pero no nueva categoría y pasando de la Pestaña 2 a la Pestaña 3: el producto no se llenará ...

es decir, si existe un elemento con un id equivalente a una pestaña anterior en el pestaña actual, no se rellenará y (¿posiblemente?) la pestaña anterior El elemento será aunque no pueda ver esto ya que no está cargado. He intentado manipular el caché pero no ayuda, especificando el ID de formulario como su padre debería arreglar esto, pero ¿por qué es necesario, ¿No deberían ser independientes las pestañas?