Приостановка пользователя во время вызова ajax

Question

У меня есть несколько кнопок на странице, которые при нажатии запускают вызов ajax, который затем обращается к БД.
После нажатия я хочу, чтобы пользователь не мог нажимать ни одну из кнопок до тех пор, покаОтветы на вызов ajax.
Но, если возможно, я бы хотел, чтобы пользователь получил какое-то указание на то, что система работает, поэтому он не будет думать, что она зависла.
Какая-то простая анимациястраница может сделать трюк, пока не будет ответа.

Кроме того, я хотел бы установить ограничение времени для вызова ajax, поэтому, если в течение 10 секунд не будет ответа, скажем, вызов вернется и выдаст сообщение об ошибке.

Какие у меня варианты?

Я работаю под WordPress, поэтому, если у него есть какой-то хороший способ справиться с этим, это тоже вариант.

Answer 1

С jQuery вы можете обрабатывать события ajax глобально, посмотрите http://api.jquery.com/category/ajax/global-ajax-event-handlers/

// #loading can be your loading element
$("#loading").ajaxStart(function(){

    // show your loading element
    $(this).show();


    // disable all buttons with a specific class
    $('.my_ajax_btns').attr('disabled', true);
});

$("#loading").ajaxStop(function(){

    // hide loading
    $(this).hide();


    // enable back your buttons
    $('.my_ajax_btns').attr('disabled', false);
});

Answer 2

это должно сделать

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;
}

демо на http://jsfiddle.net/gaby/X6sDS/1/

Answer 3

Попробуйте этот плагин Jquery, чтобы заблокировать пользователя до получения ответа на вызов AJAX.Вы можете установить время ожидания в миллисекундах в настройках AJAX.

http://jquery.malsup.com/block/