jQuery.ajax.active OR jQuery.active is not decremented in CHROME

Question

I've been reading a lot before posting this question but I have not find the solution yet.

I've got a form with 3 fields (input type="text") with 'blur' event triggering a separate ajax. (Ajax will check for existence of the inputed data). On form submit, i would like to trigger the 'blur' events of these three fields (hence triggering the 3 ajax) and then if no error is found, the submit will proceed. I have used the jQuery.active variable to know if the 3 ajax requests are complete before checking for errors. But it does not work on chrome.

The Form:

<form id="theForm">
<input type="text" name="loginname" class="checkIfLoginnameExist" />
<input type="text" name="name" class="checkIfNameExist" />
<input type="test" name="phone" class="checkIfPhoneExist" />
</form>

The Ajax:

jQuery('.checkIfLoginnameExist').blur(function() {
var lname = jQuery(this).val().trim();
jQuery.ajax({
url: '<the URL>',
type: 'POST',
cache: false,
data: 'loginname=' + lname,
success: function() {
//--logic, if error found, add a span.validation-error beside the input
},
fail: function() {
--logic
}
});
});

On Submit logic:

jQuery('#theForm').submit(function(e) {
e.preventDefault();
jQuery(this).find('input').each(function() {
jQuery(this).blur(); // ------------ this will trigger the ajax
});

alert('before ' + jQuery.active);
while(jQuery.active > 0) {
    //do nothing
    alert(jQuery.active);
}
alert('after ' + jQuery.active);

//-- check for span.validation-error
//-- return true of false depending on span.validation-error
});

For IE and FF, the code works as expected, but in Chrome, it's stuck in the while(jQuery.active > 0) because the jQuery.active is not decremented, it's fixed on '3'.

You should not be able to do `while(jQuery.active > 0) { //do nothing alert(jQuery.active); }` since it does not release the processor - try something like https://code.google.com/p/jquery-ajaxq/ — mplungjan, Mar 02 '14 at 06:48
possible duplicate of [Queue ajax requests using jQuery.queue()](http://stackoverflow.com/questions/4785724/queue-ajax-requests-using-jquery-queue) — mplungjan, Mar 02 '14 at 06:50

score 0 · Answer 1 · answered Dec 01 '16 at 13:13

In your case it seems you are checking for the wrong thing. you are not interested to know how many active AJAX requests are there in the pipeline but instead you need to know if all AJAX requests are DONE. on top of that where you click submit it would in my eyes imply that you are not in any of the inputs thus manually running the "blur" events seems like an overkill there. i suggest that you connect the inputs' ajax requests to the inputs themselves.

I made a mockup of some cleaned up code for you:

var blockSubmit = true;

$( document ).ajaxStop(function() {
  blockSubmit = false;
});

jQuery('#theForm').submit(function(e) {
    e.preventDefault();
    setInterval(function() {
        if (!blockSubmit) {
            //Do something
        }
    }, 200);    
});

jQuery.ajax.active OR jQuery.active is not decremented in CHROME

1 Answers1