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!

I'd recommend using (function($){ //code })(jQuery); - that way you can use the $ shorthand instead of jQuery each time :) — Russ Cam, Mar 08 '09 at 20:19
Thanks! As I said Im pretty new to this so any tips are HIGHLY appreciated! Will modify this asap! — OtakuD, Mar 08 '09 at 22:19
do you have this on the internets somewhere so i may look at it? — mkoryak, Mar 09 '09 at 19:44

score 1 · Accepted Answer · edited May 23 '17 at 12:13

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.

edited May 23 '17 at 12:13

Community

1
1

answered Mar 10 '09 at 21:24

spmason

4,048
2
24
19

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 Mar 15 '09 at 20:30
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 Mar 18 '09 at 20:29

score 0 · Answer 2 · answered Mar 08 '09 at 21:59

0

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?

answered Mar 08 '09 at 21:59

Scott Evernden

39,136
15
78
84

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 Mar 08 '09 at 22:15
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 Mar 09 '09 at 01:57
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 Mar 09 '09 at 08:33

score 0 · Answer 3 · edited Mar 09 '09 at 17:07

0

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!

edited Mar 09 '09 at 17:07

Russ Cam

124,184
33
204
266

answered Mar 09 '09 at 17:04

OtakuD

63
5

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 Mar 09 '09 at 17:09
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 Mar 09 '09 at 17:15
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 Mar 09 '09 at 20:11
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 Mar 10 '09 at 11:46

score 0 · Answer 4 · edited May 30 '18 at 15:48

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?

First jQuery plugin issues

4 Answers4