$.ajax not returning data

Question

I am trying to POST data back to the server and get a dataset back. What I am getting back instead is the HTML for the whole page AND it is not kicking off the Action in my Controller. And yes - JQuery is still confusing to me.

The code I currently have is:

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

    $.ajax({ path: "/CatalogAjaxController/UpdateNavigation"
          , type: "POST"
          , data: "{ productGroup: " + productGroup + ", productType: " + productType + ", itemsPerPage: " + itemsPerPage + ", pageIndex: " + pageIndex + ", filters: " + filters + "}"
          , success: function(data) { handleMenuData(data); }
    });
    $.ajax({ path: "/CatalogAjaxController/UpdateProducts"
          , type: "POST"
          , data: "{ productGroup: " + productGroup + ", productType: " + productType + ", itemsPerPage: " + itemsPerPage + ", pageIndex: " + pageIndex + ", filters: " + filters + "}"
          , success: function(data) { handleProductData(data); }
    });
}

The callback function is tripping and the function definition looks like:

function handleMenuData(data) {
    $("#navigation ul").remove();
    }

At this point the "data" variable has the Page HTML in it. (And like I said, the Action did not fire off.) I am thinking that I should not be calling the $ajax function directly but using a var function definition. Something like:

var retrieveMenuData = function(path, productGroup, productType, itemsPerPage, pageIndex, filter, fnHandleCallback) {
    $.ajax( path
          , type
          , { productGroup: productGroup, productType: productType, itemsPerPage: itemsPerPage, pageIndex: pageIndex, filter: filter }
          , function(data) { fnHandleCallback(data); });
};

I'm not sure if I have it defined correctly or how to call it correctly. ANy help is appreciated!

Answer 1

The solution may be pretty simple.

You're using path: where it should have url:

Source: jQuery.ajax options list

Answer 2

also, you've got some odd quotes in there.. the syntax for data: is more like this:

$.ajax({
    type: "POST",
    url: "bin/login.php",
    data:{data1: var1,data2: var2},
    success: function(data) {
        }
     });