Question

I’m using dynamic pagination.

I need to cancel the success event in jQuery ajax before starting another.

I’ve set a variable equal to $.ajax(), and before doing so, I call abort no matter what.

The problem is that success still fires.

The answer for Ajax: How to prevent jQuery from calling the success event after executing xmlHttpRequest.abort(); is wrong, or at least it doesn’t work for me because if I fire abort right after the ajax nothing ever happens.

I just want the success of the ajax variable not to fire if another one is about to start.

Code Snippet:

if(updatePageAJAX){
    updatePageAJAX.abort();
}

updatePageAJAX = $.ajax({
});

I can provide more detail if you like, but updatePageAJAX works. I couldn’t tell you if abort works. I put an alert in the if to see if it fires; it does.

If I put abort right after setting updatePageAJAX = $.ajax, nothing ever happens.

Answer 1

Have you tried saving your xhr object in a variable so that you can check in the success callback if it is the right xhr object?
For example:

$(function() {
    var xhr = null;

    $('.link').click(function() {
        var page = $(this).text();
        if(xhr != null) {
            xhr.abort();
        }
        xhr = $.ajax({
            type: 'GET',
            url: 'index.php',
            data: 'js=true&page=' + page,
            success: function(data, responseCode, jqxhr) {
                if(xhr == jqxhr) {
                    $('#page').text(data);
                    xhr = null;
                }
            }
        });
    });
});

This way, the success callback won’t execute if this is not the right request.