First jQuery plugin issues

Question

Hey guys, first off let me just say Im a jQuery noob! I want to make a simple plugin that auto-populates a html select element, it works fine on the first element but when I call it again to populate a second it appends nothing. Here are my calls in the ajax tab where #product and #new-category are the select elements:

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

And here is the 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);

Strangely if I change the second function call $("#new-category").popSelect("categories"); to $("[id^='new-category']").popSelect("categories"); it then works fine, is there something wrong with my selector?

Thanks for any help!

Answer 1

I just answered a similar question, basically you can't have two elements with the same ID on the same page, it causes this exact issue. You'll have to use a class or change one of the IDs.

Answer 2

I dont have a direct answer but it looks like you will have 2 active ajax calls outstanding at essentially the same time which could lead to some strangeness?

Answer 3

Ok so something like this?

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

I get no errors but it still only populates the first select, same response in IE. Puzzling, even add a "wait" function inbetween calls and it did nothing. Is having the id tag == name tag ok? Something I just noticed, replacing "id='new-category'" with "id='newwcategory'" makes it work!? is ther somthing wrong with "-"'s in ids?

Thanks again for all the help so far!

Answer 4

I have since established that this is an issue with jQuery UI tabs since the plugin works perfectly without them! Elements in the currently selected tab aren't being populated if the previously selected tab had an element of the same id. Example:

first tab:

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

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

Second Tab:

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

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

Third Tab:

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

Going from Tab 1 to Tab 2 - product will be populated but not new_category and going from Tab 2 to Tab 3 - product will not be populated...

i.e. if an element with an id equivalent to a previous tab exists in the current tab, it will not be populated and (possibly?) the previous tab element will be although I cant see this since it's not loaded. I've tried fiddling with cache but it doesn't help, specifying the form id as its parent should fix this but why is it necessary, shouldn't the tabs be independent?