$ .GetJSON error on returned item
Still works through JQuery to fetch data and repopulate parts of the page. Right now I cannot get it to return data, but the error message "data is undefined" appears.
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 the error "Microsoft JScript Runtime Error:" data is "undefined".
What am I missing?
Oh! closer (answer with 1 vote right now) - until the server call is made . It goes directly to the callback handler. :(
It looks like it works for the most part. My url was pointing to CatalogAjaxController. It should point to CatalogAjax since MVC knows it is a controller.
a source to share
Instead:
retrieveData2("/CatalogAjaxController/UpdateNavigation", productGroup, productType, itemsPerPage, pageIndex, filters, handleMenuData);
I needed to do:
retrieveData2("/CatalogAjax/UpdateNavigation", productGroup, productType, itemsPerPage, pageIndex, filters, handleMenuData);
Due to my routes, I ended up changing it to:
retrieveData2("/Catalog/Ajax/Update/Navigation", productGroup, productType, itemsPerPage, pageIndex, filters, handleMenuData);
Note that the word "Controller" is no longer part of the path. Kudos for helping out with this. Not exactly the correct answer, but all the answers gave me the meat to get through this. Special honor to Ben Sheirman for some time to show me FireBug and use $ .ajax with partial views!
a source to share
In this line:
retrieveData2("/CatalogAjaxController/UpdateNavigation", productGroup, productType, itemsPerPage, pageIndex, filters, handleMenuData(data));
the data passed to handleMenuData is undefined is in the scope of the updateNavIndex function. I don't actually see how the updateNavIndex function is called and how it is supposed to know about the data parameter.
Change this line:
retrieveData2("/CatalogAjaxController/UpdateNavigation", productGroup, productType, itemsPerPage, pageIndex, filters, handleMenuData(data));
at
retrieveData2("/CatalogAjaxController/UpdateNavigation", productGroup, productType, itemsPerPage, pageIndex, filters, handleMenuData);
The retrieveData2 function receives the last argument with a function, which is handleMenuData in your case. It will call it with a data parameter that is defined inside retrieveData2. Believe me, you got something :)
a source to share
The code you posted retrieveData2
has a parameter named filters
, but your call $.getJSON()
is passed filter: filter
instead of filter: filter
s :
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 it be the reason?
a source to share
You are passing handleMenuData (data) as a function call , not a function pointer. Instead of passing it to a function, it passes the result of calling that function.
to fix this you either need to quote the callback: 'handleMenuData(data)'
or better: wrap it with a built-in functionfunction() { handleMenuData(data); }
But it looks like the data is part of the result, in which case you are simply removing the arguments from the method:
retrieveData2("/CatalogAjax/UpdateNavigation", productGroup, productType, itemsPerPage, pageIndex, filters, handleMenuData);
a source to share
The json response returned from your server script may be invalid or empty altogether. Server side wiring script that generates JSON will help diagnose this.
Do you have any bugs in Firefox? Have you tried viewing the server response using Firebug? Firebug is invaluable for debugging this kind of thing.
a source to share