Question

I’m having some trouble populating a dropdownlist with some JSON data, i suspect that the error occurs because of the way im appending the $.post within the #stuff div, but i’ve tried this a couple of ways and just wont get the hang of it.

The select id=”” tag & the div lies within another view (it’s not part of this particular document) , is that a problem for populating the dropdown-list this way?

Ive tried to alert out the “listItems” and i’ve got the option values etc… dont get it why it wont populate.

Any help would be appreciated.

Json-response from the $.post =

{"childrendata":[{"id":"42","parent":"1","fName":"hej","lName":"nisse","birthdate":"2011-10-21"}]}

The jQuery/js:

 $("#stuff").append(function(){


                $.post("show_relations", {},
                            function(data)
                            {
                            $("#stuff").empty();

                            json = eval('('+data+')');

                                if(data == '{"childrendata":[]}')
                                {
                                    $("#stuff").append("No relations registered.");
                                }
                                else
                                {
                                  var listItems= "";

                                      for (var i = 0; i < json.childrendata.length; i++)
                                      {
                                        listItems+= "<option value='" + json.childrendata[i].fName + "'>" + json.childrendata[i].lName + "</option>";
                                      }

                                    $("#child_list").html(listItems);
                                }
                            });
            });
    });

Answer 1

Edit: Based on your comment, I’ll assume your problem is purely single-page.

The problem with that code would appear to be the fact that you’re trying to use .append() with a function (which is valid jQuery), but that the function doesn’t return anything that jQuery can append to the ‘stuff’ node; $.post makes an Ajax call, which returns immediately.

Instead, try something like the following (modifying the URL to the Ajax call as required):

$.post("url/to/post/to", {},
    function(data) {
        $("#stuff").empty(); //Clear your stuff div

        var children = data.childrendata; //jQuery automatically unserializes json

        if(children.length == 0) {
            $("#stuff").append("No relations registered.");
        }
        else {
            $('#stuff').append('<select id="child_list"></select>');
            $.each(children, 
                function(index, value) {
                    //Append each option to the selectbox
                    $("#child_list").append("<option value='" + value.fName + "'>" + value.lName + "</option>");
                }
            );
        }
    },
    'json'
);

$.each() is the generic jQuery iterator, which helps de-clutter the code.

What this does is make an Ajax post to the provided URL, which responds with the serialized json object. The callback takes that response (which jQuery has already unserialized by itself), adds a new select to the ‘#stuff’ div, and then adds the dynamically-created options to the new select.

Endnote: My apologies for not posting the link to the $.each documentation, StackOverflow only allows me to post 2 hyperlinks in a single post currently.