Отключить кнопку во время запроса 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);
, кнопка отключена.
почему это могло произойти с кодом выше, я думаю, что последовательность кода верна.
Ответы
Ответ 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.