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, Oct 14 '09 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, Oct 14 '09 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, Oct 14 '09 at 19:00

Mike Blandford · Accepted Answer · 2009-10-14T19:02:56.827

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 '09 at 19:02

answered Oct 14 '09 at 18:38

Mike Blandford

3,952
4
29
32

how could I tie this to a dynamic select list's load? – Jimmy Oct 14 '09 at 18:54
$(function(){}) is the same as $(document).ready(function(){}). So this hooks up everything in the ready handler, no need for $.fn extensions. – Mike Blandford Oct 14 '09 at 18:57
The idea is that when document ready fires, it makes the ajax call, and then in the callback it selects all the – Mike Blandford Oct 14 '09 at 18:58
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 Oct 14 '09 at 18:58
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 – Jimmy Oct 14 '09 at 18:59
Select elements don't have an onload event. You'll have to use a selector – Mike Blandford Oct 14 '09 at 19:07
i really appreciate your help and this is working so far so good, the problem im having is im injecting more fields without AJAX, so they document.ready() only is firing on the load of the page so only my first input field is being populated, any ideas? – Jimmy Oct 14 '09 at 19:11
i added more to my original question about how i am adding select inputs – Jimmy Oct 14 '09 at 19:12
Does the ajax response change between clicks? If not, I would make the ajax call on document ready, store the response in a variable, and when the user clicks on the #moreFiles, then populate the select there. – Mike Blandford Oct 14 '09 at 19:18
great idea, i'll give it a shot and let you know how it goes – Jimmy Oct 14 '09 at 19:21
i'm having a bit of trouble isolating the JSON object that I pull and trying to loop through it to write out options to my selectlist, any pointers? – Jimmy Oct 14 '09 at 19:27
You should be able to go to /Controller/GetFileCategories in your browser and see what the JSON looks like. If you post that I can probably help – Mike Blandford Oct 14 '09 at 19:36
my json result has value and text fields that are meant for the matching text/value fields in an option on a select – Jimmy Oct 14 '09 at 19:39
i got it working, just had to do some adjustments to my initial call and had it print out the select list's html into a var and am just dumping that on my button click thanks for the help – Jimmy Oct 14 '09 at 19:56

score 1 · Answer 2 · answered Oct 14 '09 at 19:53

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 '09 at 19:53

Mike Blandford

3,952
4
29
32

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 – Jimmy Oct 15 '09 at 00:50

score 0 · Answer 3 · answered Oct 14 '09 at 18:02

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 '09 at 18:02

Josh

16,286
25
113
158

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 Oct 14 '09 at 18:09
and that was a typo on my part, with correct capitalization it still doesn't work – Jimmy Oct 14 '09 at 18:10

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

3 Answers3

Linked