populate selectlist with json data in JQuery when the selectlist is loaded (not the document)

Question

I have a button on a form that is dynamically spawning a select list, which is supposed to be populated with json data, i have all of the json data being pulled in correctly my only issue is hooking the selectlist's onload event to fill itself with data, i know i could use $('#itemID').fillSelectlist() to fill it but the problem is my select list ID's are dynamically generated and i don't know of a way to concat a select like ( $("#item" + itemNum + "list") )

my current code is below:

$.fn.fillSelect = function(data) {
return this.clearSelect().each(function() {
    if (this.tagName == 'SELECT') {
        var dropdownList = this;
        $.each(data, function(index, optionData) {
            var option = new Option(optionData.Text, optionData.Value);
            if ($.browser.msie) {
                dropdownList.add(option);
            }
            else {
                dropdownList.add(option, null);
            }
        });
    }
});

}

I was attempting to hook this up to the onload of a select list like so:

$.fn.FillDDL = function() {
$.getJSON("/Controller/GetFileCategories", null, function(data) {
    this.fillSelect(data);
});

<select id="file1Category" name="file1Category" class="form_input_small" onload="fillDDL"></select>

any pointers?

EDIT: my select lists are injected to the page as html stored in a jquery script with the onload="fillDDL" value but they aren't firing when they appear, if i set a script to do $('#file1Category').fillDDL in my document.ready() script it fires but errors, so I guess i am expanding my question to include why that onload isn't working and if there is another method i should be using?

EDIT2: my fields are being added to the form like so:

$('#moreFiles').click(function() {
    $("<div class='form_row'>" +
        "<div id='file" + FileCount + "row'>" +
        "<input type='button' class='form_input_small delete' value='X' onclick=\"$('#file" + FileCount + "row').empty()\" />" +
        "<label for='file" + FileCount + "File' class='form_label_small'>File</label>" +
        "<input type='file' class='form_input_small' name='file" + FileCount + "File' id='file" + FileCount + "File' />" +
        "<label for='file" + FileCount + "Category' class='form_label_small'>Category</label>" +
        "<select id='file" + FileCount + "Category' name='file" + FileCount + "Category' class='form_input_small'></select>" +
        "</div></div><br class='clear' />")
        .hide()
        .appendTo($('#fileDiv'))
        .fadeIn('fast');
    FileCount++;
});

I assume your clear select selects all select elements and clears them and returns the jQuery result set — Mike Blandford
– Mike Blandford, Commented Oct 14, 2009 at 18:42
actually it doesn't, only the current object and btw my selectlists that are dynamic aren't the only selectlists on the page — Jimmy
– Jimmy, Commented Oct 14, 2009 at 18:50
So does each select list make a separate ajax call or do they all get the data from the same one? — Mike Blandford
– Mike Blandford, Commented Oct 14, 2009 at 19:00

Mike Blandford · Accepted Answer · 2009-10-14 19:02:56Z

2

$(function(){
 $.getJSON("/Controller/GetFileCategories", null, function(data) {
  $("select").each(function(){
    var dropdownList = this;
                $(dropdownList).clearSelect();
    $.each(data, function(index, optionData) {
     var option = new Option(optionData.Text, optionData.Value);
     if ($.browser.msie) {
       dropdownList.add(option);
     }
     else {
      dropdownList.add(option, null);
     }
    });
  });
 });
});

Edit: oops. rewrote and fixed.

Also, there's a plugin for this kind of thing

Edit: You'll have to replace $("select") with a selector that selects only the lists you want.

edited Oct 14, 2009 at 19:02

answered Oct 14, 2009 at 18:38

Mike Blandford

4,0124 gold badges32 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Jimmy Over a year ago

how could I tie this to a dynamic select list's load?

Mike Blandford Over a year ago

$(function(){}) is the same as $(document).ready(function(){}). So this hooks up everything in the ready handler, no need for $.fn extensions.

Mike Blandford Over a year ago

The idea is that when document ready fires, it makes the ajax call, and then in the callback it selects all the <select> elements on the page, clears them, and populates them with the callback data.

Jimmy Over a year ago

yes i understand that but i mean how do I call that from a selectlist in the DOM that is injected after the $(document).ready() fires?

Jimmy Over a year ago

also see my note above, i dont want to clear all of the select elements, only my dynamic ones to fill them with my JSON data

|

Mike Blandford · Accepted Answer · 2009-10-14 19:53:10Z

1

If your data looks like this:

var data = [{"Text":"file1","Value":1},{"Text":"file2","Value":2}];

then:

var str = "";
$.each(data, function(index, optionData) {
    str += "<option value=\"" + optionData.Value + "\">" + optionData.Text + "</option>";
});

then in your click handler can put

"<select>" + str + "</select>";

Might have to write window[str] instead of str so that it's global

answered Oct 14, 2009 at 19:53

Mike Blandford

4,0124 gold badges32 silver badges32 bronze badges

1 Comment

Jimmy Over a year ago

yup thats exactly what i did, worked beautifully. thanks again for all the help, ive been bombarding myself with jquery/json/etc for the past couple days, had to learn it eventually

Josh · Accepted Answer · 2009-10-14 18:02:12Z

0

looks like your capitalization may be off.

$.fn.FillDDL

vs

onload="fillDDL"

you could also do this:

<script type="text/javascript">
    $().ready(function() {
        $('#file1Category').FillDDL();
    });
</script>

answered Oct 14, 2009 at 18:02

Josh

16.6k28 gold badges117 silver badges172 bronze badges

2 Comments

Jimmy Over a year ago

the problem with your second example is that my field names aren't static and known beforehand, they get generated on a button click

Jimmy Over a year ago

and that was a typo on my part, with correct capitalization it still doesn't work

Collectives™ on Stack Overflow

populate selectlist with json data in JQuery when the selectlist is loaded (not the document)

3 Answers 3

14 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

14 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related