jQuery - ignore double AJAX calls?

Question

I have AJAX calls attached in multiple places (unfortunately not only buttons, but also links, forms and other stuff), I know how to handle this manually (find every place I do an AJAX call and then block / overlay the button during first call), I'm wondering if there's a way to do it more automagically?

If we're talking jQuery - maybe a plugin? Something that will just work? :)

It'd be perfect to have something like:

if clicked element has .ajax class 
  block all ajax requests if the current one is still live

I'd then add .ajax class to every button/link/whatever triggering the request and voila. Does anything like this exist?

Answer 1

You can to create a global variable:

loadingAjax = false;

whenever an event triggers, you turn this variable to TRUE by using:

$("selector").click(function(){
  if(!loadingAjax){
    loadingAjax = true;
    $.ajax(options)..
  }
});

And you should turn loadingAjax back into false when the ajax stops:

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