Question

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 click all of them and show busy indicators for all of them.

Any kind of advice is really appreciated.

Thanks

Answer 1

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.