Question

I’m loading a partial view dynamically with Javascript into a DIV:

    $.ajax({
        url: '@Url.Action("Details","User")',
        data: { id: userId},
        type: 'post',
        success: function (data) {
        $("#user-details").show().html(data);})

When displayed I would like to populate a few drop down menus for a user to make a selection.
Lets say I want to populate a list of “UserCategories”

So on success of ajax call above I do:

                $.getJSON('@Url.Action("GetUserCategories","User")',function(data) {
                $.each(data, function (key, item) {

                    $("#userCategories-list").append(
                        $("<option></option>").text(item.Name).val(item.Id)
                    );
                });
            });

The UserCategories list isn’t being populated.

I assume it’s because the UserDetails source html that contains the UserCategories drop down menu is rendered dynamically and not shown on the page ?

How can I access and populate my “userCategories-list” drop down menu that’s displayed with an ajax call and which HTML/control name I cannot see when I look at the page source/Firebug ?

Thank you in advance.

Answer 1

Can’t say for sure, but my guess is that your partial view isn’t a part of the browsers DOM when your list-creating function is called. In fact, I don’t see any code that loads your partial into the browser for rendering.

Have you tried debugging with firebug or the chrome debugger? You can set breakpoints in your functions and see what is actually going on.

 $.ajax({
        url: '@Url.Action("Details","User")',
        data: { id: userId},
        type: 'post',
        success: function (data) { 
            $("#partialContainer").html(data);
            $.getJSON('@Url.Action("GetUserCategories","User")',function(listData) {
                $.each(listData, function (key, item) {
                    $("#userCategories-list").append(
                        $("<option></option>").text(item.Name).val(item.Id)
                    );
                }); //each
            )); //getJson
        } //success anon function
  }); //$.ajax