How do I know if jQuery has an Ajax request pending?

Question

I'm having some problems with a jQuery control we made. Suppose you have a dropdownlist that allows you to enter the ID of the item you're looking for, and when you press ENTER or lose focus in a textbox it validates via jQuery that the ID you entered is correct, showing an alert if it doesn't.

The thing is that when an ordinary user enters an invalid value in it and loses focus by pressing the submit button, the jQuery post returns after the submit of the form has been sent.

Is there any way that I can check if there's any Async request processing by jQuery so that I do not allow the form submit?

Answer 1

The $.ajax() function returns a XMLHttpRequest object. Store that in a variable that's accessible from the Submit button's "OnClick" event. When a submit click is processed check to see if the XMLHttpRequest variable is:

1) null, meaning that no request has been sent yet

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

In either of those cases, return true and allow the submit to continue. Otherwise return false to block the submit and give the user some indication of why their submit didn't work. :)

Answer 2

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