is there anything wrong with returning this json result with two lists

Question

I have an asp.net mvc site and i want to call the server when i change a dropdown list. my code hits the server controller action but i never get the callback. Is there any gotcha that i am missing here?

Here is my controller action:

    public ActionResult LoadTeamsandApplications(int id)
    {
        WorkstreamRoadmapViewModel vm = new WorkstreamRoadmapViewModel();
        vm.Applications = GetAppList(id, 0);
        vm.Teams = GetTeamList(id, 0);
        JsonResult result = Json(vm);
        return result;
    }

NOTE: that GetAppList() and GetTeamList() both return

 List<SelectListItem>

Here is my jquery code:

 $("#filter").change(function(e) {

    var filter= $("#filter").val();
    var loadURL = "/List/LoadTeamsandApplications/" + filter;

    $.post(loadURL , function(data) {

        var items = "<option selected></option>";
        $.each(data.Teams, function(i, item) {
            items += "<option value='" + item.Value + "'>" + item.Text + "</option>";
        });
        $("#teamFilter").html(items);

        var items1 = "<option selected></option>";
        $.each(data.Applications, function(i, items1) {
            items1 += "<option value='" + item1.Value + "'>" + item1.Text + "</option>";
        });
        $("#applicationFilter").html(items);

    }, "json");
});

EDIT

i added this code:

$(document).ajaxError(function(e, xhr, settings, exception) {
    alert('error in: ' + settings.url + ' \\n' + 'error:\\n' + exception);
}); 

but all i got back was "Error Undefined"

Answer 1

A couple of pointers for troubleshooting this.

Make sure your server method returns the data you expect. You can easily write a unit test to make sure that you return a JsonResult with the data you expected. Failing that, just debug the project and set a breakpoint on return Json(vm); to make sure the method actually returns.

Just for the sake of debugging, try to simply going to the url by allowing GET - change return Json(vm); to return Json(vm, JsonBehaviour.AllowGet); and see what happens.

If the above is all good, start sticking console.log statements through your JavaScript to make sure there are no typos etc. For example:

    var items = "<option selected></option>";
    console.log(data.Teams);
    $.each(data.Teams, function(i, item) {
        items += "<option value='" + item.Value + "'>" + item.Text + "</option>";
    });
    $("#teamFilter").html(items);

    var items1 = "<option selected></option>";
    console.log(data.Applications);
    $.each(data.Applications, function(i, items1) {
        items1 += "<option value='" + item1.Value + "'>" + item1.Text + "</option>";
    });
    $("#applicationFilter").html(items);

To get console working you will either need Firebug extension for Firefox or simply bring up Developer Console in Chrome.