views:

359

answers:

4

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!

A: 

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?

Scott Evernden
Hmm, ok the two calls being the $().popSelect();? How would I correct this? Also would this explain why changing the selector to $("[id^='new-category']").popSelect("categories"); fixes the issue? Thanks for your input!
OtakuD
perhaps because it takes more cycles to resolve the [id^='new-category'] selector vs the fast-to-fetch # form ?.. do you see the same behavior on Firefox and Internet Explorer?
Scott Evernden
It shouldn't be too hard to verify this theory: create a queue and put the json calls into that queue. That should make them run one at a time...
David Hanak
A: 

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!

OtakuD
There shouldn't be a problem with having hyphens in ids. see http://stackoverflow.com/questions/70579/what-is-a-valid-value-for-id-attributes-in-html
Russ Cam
However, there may be a problem with hyphens in option values as they are CData types. See http://htmlhelp.com/reference/html40/values.html
Russ Cam
Hmm, my option values are: item.id = integer and item.value = string (a-z) so I cant see a problem there, even changed the variable name to no avail. Sorry if I misunderstood something.
OtakuD
Found a new issue, changing the id of "new-category" in one tab (it exists in three different jQuery UI tabs) makes it work for that tab. Is the function appending to a field that isnt in the current tab somehow?
OtakuD
A: 

Ok 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 arent being populated if the previously selected tab had an element of the same id eg:

first tab:

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

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>

Thrid 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...

ie 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 its not loaded. Ive tried fiddling with cache but it doesnt help, specifying the form id as its parent should fix this but why is it necessary, shouldnt the tabs be independent?

Thanks for any info on this!

OtakuD
+1  A: 

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.

spmason
Is there no way to keep the 3 ajax tabs seperate? Else Ill have to scrap the jQuery UI tabs and just load via links which doesnt look as nice... Thanks, Ill use classes for now!
OtakuD
I don't think so, without changing the Ids to make them unique that is, or using classes.You're basically trying to go against the HTML spec, which in this instance at least appears to be something that all browsers take seriously
spmason