Ajax requests not completing before page redirect

Question

I have an admittedly large amount of ajax requests being sent out with an onclick trigger.

(Probably close to 30 requests).

It looks something like this:

if($(this).attr('id') == 'checkbox'){
    var type = 'checkbox';

    // loop over checkbox inputs and store in array 'checkboxarray'
    var checkboxarray = [];
    $(this).find('input').each(function(){
        checkboxarray.push($(this).next('span').text());
    });
}
else if($(this).attr('id') == 'dates'){
    var type = 'dates';
    var default_value = $(this).find('input').val();
}
else{
    alert('Error: There has been an unknown extra iteration');
}

// Send as ajax call to be processed
$.ajax({
    type: "POST",
    url: "process.php",
    data:  "type="+type+"&default_value="+default_value+"&checkboxarray="+checkboxarray+,
    success: function(html){

    }
});


$("#processessing").show();
$('#outer_container').html('<br /><br />Processing…<br /><br />'); 

// once all of the requests stop, fire it off.      
$("#processessing").ajaxStop(function(){
    $(this).hide();
    $('#outer_container').html('Saved'); 
    function redirect(){
        window.location = "page.php";
    }
    setInterval(redirect,500);
});

On small amounts of data this works, but on large sets of data, a lot gets lost... any suggestions?

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

If your events are bound to an anchor tag, then you'll have to stop the page from following the link. Use preventDefault():

$(function () {

  $("a#foo").on("click", function (e) {
    e.preventDefault();

    // ajax requests continue here....
  });

});

edit Well, since that wasn't your problem, it is probably actually related to the number of ajax threads you're spawning. Browsers have a built-in cap in the number of open connections they can make (see here: How many concurrent AJAX (XmlHttpRequest) requests are allowed in popular browsers? ). I would suggest refactoring your code to issue fewer requests.

It isn't... the event is fired on a button click. (not a submit button) — kylex, Nov 29 '11 at 22:24

jfriend00 · Answer 2 · 2011-11-29T22:58:14.910

The only sure fire way to solve this problem is to keep a count of how many ajax calls you've fired and in the success handler, only do the redirect when the last ajax call has completed successfully.

You haven't included enough of your code for me to really advise more specifically, but it would be generally like this:

// init global count to however many ajax calls you're going to do
var ajaxCnt = 30;

function doMyAjax() {
    // Send as ajax call to be processed
    $.ajax({
        type: "POST",
        url: "process.php",
        data:  "type="+type+"&default_value="+default_value+"&checkboxarray="+checkboxarray+,
        success: function(html){
            // when last ajax call completes redirect
            --ajaxCnt;
            if (ajaxCnt == 0) {
                window.location = "page.php";
            }
        }
    });
}

If you know in advance how many ajax calls you are doing, it might be safer to just initalize ajaxCnt to that value (and not increment it in the doMyAjax() function. Also, for completeness, you should handle ajax errors and decrement the count in the ajax error handler too.

Ajax requests not completing before page redirect

2 Answers2