Подтвердить что ты не робот

Отключить кнопку во время запроса AJAX

Я пытаюсь отключить после нажатия кнопки. Я пишу свой код следующим образом:

$("#ajaxStart").click(function() {
                $("#ajaxStart").attr("disabled", true);
                $.ajax({
                       url: 'http://localhost:8080/jQueryTest/test.json',
                       data: { 
                            action: 'viewRekonInfo'
                       },
                       type: 'post',
                       success: function(response){
                           //success process here
                           $("#alertContainer").delay(1000).fadeOut(800);
                       },
                       error: errorhandler,
                       dataType: 'json'
                });
                $("#ajaxStart").attr("disabled", false);
            });

но кнопка не отключена. в то время как я удаляю $("#ajaxStart").attr("disabled", false);, кнопка отключена.

почему это могло произойти с кодом выше, я думаю, что последовательность кода верна.

4b9b3361

Ответ 1

Поместите $("#ajaxStart").attr("disabled", false); внутри функции успеха:

$("#ajaxStart").click(function() {
    $("#ajaxStart").attr("disabled", true);
    $.ajax({
        url: 'http://localhost:8080/jQueryTest/test.json',
        data: { 
            action: 'viewRekonInfo'
        },
        type: 'post',
        success: function(response){
            //success process here
            $("#alertContainer").delay(1000).fadeOut(800);

            $("#ajaxStart").attr("disabled", false);
        },
        error: errorhandler,
        dataType: 'json'
    });
});

Это будет гарантировать, что для параметра disable установлено значение false после, данные загружены... В настоящее время вы отключите и включите кнопку в той же функции щелчка, то есть в то же время.

Ответ 2

В вашем коде вы просто отключите и включите кнопку одним и тем же нажатием кнопки.

Вы должны включить его во время завершения вызова AJAX

что-то вроде этого

           success: function(response){
                    $("#ajaxStart").attr("disabled", false); 
                       //success process here
                       $("#alertContainer").delay(1000).fadeOut(800);
                   },

Ответ 3

Я решил это, определив две функции jquery:

var showDisableLayer = function() {
  $('<div id="loading" style="position:fixed; z-index: 2147483647; top:0; left:0; background-color: white; opacity:0.0;filter:alpha(opacity=0);"></div>').appendTo(document.body);
  $("#loading").height($(document).height());
  $("#loading").width($(document).width());
};

var hideDisableLayer = function() {
    $("#loading").remove();
};

Первая функция создает слой поверх всего. Причина, по которой слой является белым и полностью непрозрачным, заключается в том, что в противном случае IE позволяет вам щелкнуть его.

Когда я делаю свой ajax, я делаю так:

$("#ajaxStart").click(function() {          
   showDisableLayer(); // Show the layer of glass.
   $.ajax({              
      url: 'http://localhost:8080/jQueryTest/test.json',              
      data: {                   
          action: 'viewRekonInfo'              
      }, 
      type: 'post',              
      success: function(response){                  
         //success process here                  
         $("#alertContainer").delay(1000).fadeOut(800);                                     
         hideDisableLayer(); // Hides the layer of glass.
      },
      error: errorhandler,              
      dataType: 'json'          
   });      
}); 

Ответ 4

Я решил это, используя глобальную функцию ajax

            $(document).ajaxStart(function () {
            $("#btnSubmit").attr("disabled", true);
        });
        $(document).ajaxComplete(function () {
            $("#btnSubmit").attr("disabled", false);
        });

здесь есть документация ссылка.

Ответ 5

Вызов $.ajax() "не будет блокировать" - значит, он немедленно вернется, а затем вы сразу включите кнопку, чтобы кнопка не была отключена.

Вы можете включить кнопку, когда AJAX успешно, имеет ошибку или иначе завершен, используя complete: http://api.jquery.com/jQuery.ajax/

полная (XMLHttpRequest, textStatus)

Функция, которая должна быть когда запрос заканчивается (после успешных и обратных вызовов ошибок выполняется). Функция передается два аргумента: XMLHttpRequest объект и строку, классифицирующую статус запроса ( "успех", "notmodified", "error", "timeout" или "Parsererror" ). Это событие Ajax.