Первые проблемы с плагином jQuery

Question

Привет, ребята, прежде всего позвольте мне сказать, что я нуб по jQuery!Я хочу создать простой плагин, который автоматически заполняет элемент выбора html, он отлично работает с первым элементом, но когда я вызываю его снова, чтобы заполнить второй, он ничего не добавляет.Вот мои вызовы на вкладке ajax, где #product и #new-category являются элементами выбора:

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

А вот плагин:

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

Странно, если я изменю второй вызов функции$("#new-category").popSelect("categories"); к$("[id^='new-category']").popSelect("categories");тогда все работает нормально, что-то не так с моим селектором?

Спасибо за любую помощь!

Answer 1

Я только что ответил на аналогичный вопрос, в принципе вы не можете иметь два элемента с одинаковым идентификатором на одной странице, это вызывает именно эту проблему.Вам придется использовать класс или изменить один из идентификаторов.

Answer 2

У меня нет прямого ответа, но похоже, что у вас будет два активных вызова ajax практически одновременно, что может привести к некоторой странности?

Answer 3

Хорошо, что-то вроде этого?

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

Я не получаю никаких ошибок, но он по-прежнему заполняет только первый выбор, тот же ответ в IE.Удивительно, но даже добавление функции «ожидания» между вызовами ничего не дало.Хорошо ли иметь тег id == name?Я только что заметил: замена «id='new-category'» на «id='newwcategory'» заставляет это работать!?что-то не так с "-" в идентификаторах?

Еще раз спасибо за всю помощь!

Answer 4

С тех пор я установил, что это проблема с вкладками пользовательского интерфейса jQuery, поскольку плагин прекрасно работает без них!Элементы на текущей выбранной вкладке не заполняются, если ранее выбранная вкладка имела такой же элемент id.Пример:

первая вкладка:

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

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

Вторая вкладка:

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

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

Третья вкладка:

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

Переход от Tab 1 к Tab 2 - продукт будет заполнен, но нет new_category и переход от Tab 2 к Tab 3 - продукт не будет заполнен...

то естьесли элемент с id, эквивалентным предыдущей вкладке, существует в текущая вкладка, она не будет заполнена и (возможно?) предыдущая вкладка элемент будет, хотя я не могу видеть это, так как он не загружен.У меня есть попробовал поиграть с кэшем, но не помогло, указав ID формы как его родитель должен исправить это, но зачем это нужно, Разве вкладки не должны быть независимыми?