Stopping an $.ajax call on page unload

Question

I have a procedure running on a timeout to load data in the background:

(function getSubPage() {
    setTimeout(function() {
        if (cnt++ < pagelist.length) {
            loadSubPage(pagelist[cnt]);
            getSubPage();
        }
    }, 500);
})();

In loadSubPage() I'm making $.ajax() calls:

function loadSubPage(page) {
    if (typeof(initSubPages[page]) === "undefined") {
        $.ajax({
            type: "POST",
            url: '/Main/GetPageData',
            data: { page: page },
            success: function (returndata) {
                // ...
            },
            error: function() {
                alert("Error retrieving page data.");
            }
        });
        initSubPages[page] = true;
    }
}

The problem I'm having is that the error handler is being hit when the user navigates away if any ajax requests are open. I'm trying to get around this by .stop()ing the requests on window.onbeforeunload, but I'm not sure what object to call .stop() on?

score 4 · Accepted Answer · answered Nov 06 '12 at 20:26

4

jQuery exposes the XMLHttpRequest object's abort method so you can call it and cancel the request. You would need to store the open request into a variable and call abort().

activeRequest = $.ajax({...

and to stop it

activeRequest.abort()

answered Nov 06 '12 at 20:26

epascarello

204,599
20
195
236

1

I see. Since I'm running the timeout, I'll need a map to keep track of these objects. – Paul Nov 06 '12 at 20:32
how do you send the ajax call if its within a variable? activeRequest.send()?? – VIDesignz Nov 06 '12 at 20:38
I added my solution based on the feedback. Thanks! – Paul Nov 06 '12 at 20:55

score 0 · Answer 2 · edited May 23 '17 at 12:03

0

The $.ajax returns XMLHTTPRequestObject which has .abort function. This function will halt the request before it completes.

var xhr = $.ajax({ /*...*/

..
..
/* Later somewhere you want to stop*/
xhr.abort();

Read more: How to cancel/abort jQuery AJAX request?

edited May 23 '17 at 12:03

Community

1
1

answered Nov 06 '12 at 20:26

Selvakumar Arumugam

79,297
15
120
134

score 0 · Answer 3 · edited May 23 '17 at 12:03

0

Abort Ajax requests using jQuery

This should come in handy.. You have a jQuery method for doing just that.

edited May 23 '17 at 12:03

Community

1
1

answered Nov 06 '12 at 20:28

iMoses

4,338
1
24
39

Paul · Answer 4 · 2012-11-06T21:04:39.447

Here is the solution I used based on the feedback:

window.onbeforeunload = function() {            
    for (page in ajaxing) {
        if (ajaxing[page] != null)
            ajaxing[page].abort();
    }
};

var ajaxing = {};

function loadSubPage(page) {
    if (typeof(initSubPages[page]) === "undefined") {
        var ajaxRequest = $.ajax({
            type: "POST",
            url: '/Main/GetPageData',
            data: { page: page },
            success: function (returndata) {
                 // ...
            },
            error: function() {
                alert("Error retrieving page data.");
            },
            complete: function() {
                ajaxing[lot] = null;
            }
        });
        ajaxing[page] = ajaxRequest;
        initSubPages[page] = true;
    }
}

Stopping an $.ajax call on page unload

4 Answers4