How to find out if jQuery is waiting for an Ajax request?

Question

I am having problems with the jQuery control we made. Suppose you have a drop-down list that allows you to enter the identifier of the item you are looking for, and when you press ENTER or lose focus in the text field, it checks through jQuery that the identifier you entered is correct, showing a warning if it doesn’t.

The fact is that when a regular user enters an invalid value into it and loses focus by pressing the submit button, the jQuery post returns after the form is submitted.

Is there any way to check if there is any kind of async request processing using jQuery so that I do not allow form submission?

Answer 1

You can use ajaxStart and ajaxStop to keep track of when requests are active.

Answer 2

$.active returns the number of active Ajax requests.

More here

Answer 3

  $(function () { function checkPendingRequest() { if ($.active > 0) { window.setTimeout(checkPendingRequest, 1000); //Mostrar peticiones pendientes ejemplo: $("#control").val("Peticiones pendientes" + $.active); } else { alert("No hay peticiones pendientes"); } }; window.setTimeout(checkPendingRequest, 1000); }); 

Answer 4

The $ .ajax () function returns an XMLHttpRequest object. Store this in a variable accessible via the Submit button OnClick. When the submit click is processed, check if there is an XMLHttpRequest variable:

1) null, which means that the request has not yet been sent

2) that the value of readyState is 4 (Loaded). This means that the request has been sent and successfully returned.

In either of these cases, return true and allow sending to continue. Otherwise, return false to block sending and give the user some indication of why their transfer did not work. :)

Answer 5

This script uses the $ .ajax.abort () method to cancel the request if it is active. It uses the readyState property to check if the request is active or not.

This is a working script

HTML

 <h3>Cancel Ajax Request on Demand</h3> <div id="test"></div> <input type="button" id="btnCancel" value="Click to Cancel the Ajax Request" /> 

JS code

 //Initial Message var ajaxRequestVariable; $("#test").html("Please wait while request is being processed.."); //Event handler for Cancel Button $("#btnCancel").on("click", function(){ if (ajaxRequestVariable !== undefined) if (ajaxRequestVariable.readyState > 0 && ajaxRequestVariable.readyState < 4) { ajaxRequestVariable.abort(); $("#test").html("Ajax Request Cancelled."); } }); //Ajax Process Starts ajaxRequestVariable = $.ajax({ method: "POST", url: '/echo/json/', contentType: "application/json", cache: false, dataType: "json", data: { json: JSON.encode({ data: [ {"prop1":"prop1Value"}, {"prop1":"prop2Value"} ] }), delay: 11 }, success: function (response) { $("#test").show(); $("#test").html("Request is completed"); }, error: function (error) { }, complete: function () { } });