Question

I have a few buttons on a page, which when clicked, trigger an ajax call, which then accesses the DB.
After a click, I want the user to not be able to click any of the buttons until the ajax call responses.
But, if possible, I’d like the user to get some indication that the system is in proccess so he won’t think it’s stuck.
Some sort of a simple animation and graying out the page can do the trick, until there’s a response.

Also, I’d like to set a time limit on the ajax call so if there’s no response for, say, 10 seconds, the call will return and give an error message.

What are my options?

I’m working under WordPress, so if it has some nice way to deal with this that’s also an option.

Answer 1

this should do it

js

$('#overlay').show();

$.ajax({
   url: 'somepage.htm',
   timeout: 10000, /*milliseconds*/
   })
  .complete(function(){ $('#overlay').hide(); }) /*runs after success or error*/
  .success(function(data){ /*do whatever*/ })
  .error(function(){ /*timeout or general error*/ });

html

<div id="overlay"></div>

css

#overlay{
  display:none;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:#666;
  opacity:0.6;
  z-index:999;
}

demo at http://jsfiddle.net/gaby/X6sDS/1/