$.getJSON error on return element

Question

Still working through JQuery to get data and repopulate portions of a page. Right now I cannot get it to return data but it does pop an error saying "data is undefined".

Code:

var retrieveData2 = function(path, productGroup, productType, itemsPerPage, pageIndex, filters, fnHandleCallback) {
    $.getJSON(path
             , { productGroup: productGroup, productType: productType, itemsPerPage: itemsPerPage, pageIndex: pageIndex, filter: filter }
             , function(data) { fnHandleCallback(data); });
};

function updateNavIndex(pageIndex) {
    var filters = $("form").serialize();
    var productGroup = $("#valProductGroup").attr('title');
    var productType = $("#valProductType").attr('title');
    var itemsPerPage = $("#ItemsPerPage").val();

    retrieveData2("/CatalogAjaxController/UpdateNavigation", productGroup, productType, itemsPerPage, pageIndex, filters, handleMenuData(data));
}

function handleMenuData(data) {
    $("#CatalogPagingMenu").remove();

    // [http://ejohn.org/blog/javascript-micro-templating/][apply data to template]
    }

when the updateNavIndex function is called I get an error of "Microsoft JScript runtime error: 'data' is undefined".

What am I missing?

---

ah! closer (the answer with 1 vote right now) - yet no server call is being made. It goes directly to the callback handler. :(

---

Got it working for the most part. My URL was pointing at CatalogAjaxController. It should point to CatalogAjax as MVC knows it is a controller.

Answer 1

In this line:

retrieveData2("/CatalogAjaxController/UpdateNavigation", productGroup, productType, itemsPerPage, pageIndex, filters, handleMenuData(data));

the data you pass to handleMenuData is undefined within the scope of updateNavIndex function. Actually I can't see how the updateNavIndex function is called and how should it know about data param.

---

Change this line:

retrieveData2("/CatalogAjaxController/UpdateNavigation", productGroup, productType, itemsPerPage, pageIndex, filters, handleMenuData(data));

to:

retrieveData2("/CatalogAjaxController/UpdateNavigation", productGroup, productType, itemsPerPage, pageIndex, filters, handleMenuData);

The retrieveData2 function gets the last argument a function, which is handleMenuData in your case. It will call it with data param, which is defined inside the retrieveData2. Believe you understood something:)

Answer 2

The json being returned from your server script may be invalid or empty altogether. Posting the server-side script that generates the JSON would help diagnose this.

Do you get any errors in Firefox? Have you tried viewing the server response using Firebug? Firebug is invaluable for debugging this kind of thing.

Answer 3

In the code you posted, retrieveData2 has a parameter called filters but your call to $.getJSON() is being passed filter: filter instead of filter: filters:

var retrieveData2 = function(path, productGroup, productType, itemsPerPage, pageIndex, filters, fnHandleCallback) {
    $.getJSON(path
             , { productGroup: productGroup, productType: productType, itemsPerPage: itemsPerPage, pageIndex: pageIndex, filter: filter }
             , function(data) { fnHandleCallback(data); });
};

Could that be the cause?

Answer 4

You're passing in handleMenuData(data) as a function call, not a function pointer. Instead of passing the function, it's passing the result of that function call.

to fix this you either need to put the callback in quotes: 'handleMenuData(data)' or better: wrap it in an inline function function() { handleMenuData(data); }

But it does look like data is part of the result, in which case you simply remove the arguments from the method:

retrieveData2("/CatalogAjax/UpdateNavigation", productGroup, productType, itemsPerPage, pageIndex, filters, handleMenuData);

Answer 5

Instead of:

retrieveData2("/CatalogAjaxController/UpdateNavigation", productGroup, productType, itemsPerPage, pageIndex, filters, handleMenuData);

I needed to do:

retrieveData2("/CatalogAjax/UpdateNavigation", productGroup, productType, itemsPerPage, pageIndex, filters, handleMenuData);

Because of my routes I ended up changing it to:

retrieveData2("/Catalog/Ajax/Update/Navigation", productGroup, productType, itemsPerPage, pageIndex, filters, handleMenuData);

Notice the word "Controller" is not part of the path now. Kudos to the help on this. No exactly right answer but all answers gave me the meat to get through this. Special kudos to Ben Scheirman for some of his time today to show me around FireBug and using $.ajax with Partial Views!