How to enable and disable div click event on ajax succeed

I have four divs on a popup and each click makes a ajax call to the back end and paints the right hand side. All four clicks are div by id clicks. When user clicks on div i want to disable the other three divs till this ajax complete. Once the ajax succeeds i want to enable the click events for the other three divs. Like that i want to do for all four div clicks.

Sometimes the server response is slow and i don't want user to cl开发者_StackOverflow中文版ick all of them and show busy indicators for all of them.

Any kind of advice is really appreciated.

Thanks

A nice way I've seen it done, and done it myself is to use a modal 'mask' overlay.

The grayed out transparent mask that covers the entire page, except for the element you're interacting with, eg. modal popup window.

You could do a mini version of it just within the popup and push the three non active divs behind it with CSS z-index.

One more way is to use the jQuery BlockUI plugin.

Another way, not recommended by jQuery is async this will block the browser itself.

var html = $.ajax({
  url: "some.php",
  async: false
 }).responseText;

jQuery also has .ajaxStart() and .ajaxStop() events that you can write your loading indicator code into.

I would use some global gAjaxInProgress variable set to true when an ajax call is in progress and to false when done. In each click function you can then check if an ajax call is in progress and if so return.

One thing I would suggest is to set a meaningless CSS class on the divs, and then have jQuery check if this class is present before executing an AJAX call. Example (untested):

$("#divContainer > div").bind('click', function() {
    if($(this).hasClass('disabled-during-ajax'))
        return;
    $("#divContainer > div").addClass('disabled-during-ajax');
    $.get('somefile.php', {}, function(data) {
        $("#divContainer > div").removeClass('disabled-during-ajax');
    });
});

var div1 = document.getElementById("div1");
//...grab the other divs...

div2.onclick = false;
div3.onclick = false;
div4.onclick = false;

function div2fcn() { alert('div2 activated'); }

//When you're ready:
div2.onclick = div2fcn;