Question

I use jquery to post to an MVC controller action that returns a table of information. The user of the page triggers this by clicking on various links.

In the event the user decides to click a bunch of these links in quick succession I wanted to cancel any previous ajax request that may not have finished.

I’ve found that when I do this (although its fine from the client’s POV) I will get errors on the web application saying that

"The parameters dictionary contains a null entry for parameter srtCol of non-nullable type 'System.Int32'"

Now the ajax post deffinately passes in all the parameters, and if I don’t try and cancel the ajax request it works just fine.

But if I do cancel the request by calling abort() on the XMLHttpRequest object that ajax() returns before it finishes I get the error from ASP.Net MVC.

Example:

//Cancel any pevious request
if (req)
{
    req.abort();
    req = null;
}

//Make new request
req = $.ajax({
    type: 'POST',
    url: "/Myapp/GetTbl",
    data: {srtCol: srt, view: viewID},
    success: OnSuccess,
    error: OnError,
    dataType: "html"
});

I’ve noticed this only happen is IE8. In FF it seems to not cuase a problem.

Does anyone know how to cancel an ajax request in IE8 without causing errors for MVC?

Thanks for any help.

Answer 1

IE might be sending part of the request body to the server before aborting, giving the server enough request to start processing, but not all the parameters it needs. You could check this by looking at IE’s activity in a proxy (like fiddler)—if you get part of the request, then IE is handling the abort() badly. If that’s the case, you may want to let the old AJAX request finish, and just prevent its OnSuccess from doing anything, rather than aborting it.

EDIT:

var req; // current/latest request

var OnSuccess = function(data, textStatus, XMLHttpRequest) {
    if (XMLHttpRequest != req) return;
    // latest request has succeeded
}

req = $.ajax(...);

Keep a reference to the latest request, as you do now, but don’t abort it. Instead, OnSuccess checks if the request object passed to it is the same as the “latest request”; if they’re different, another request has intervened, and it passes.