Как узнать, когда все вызовы ajax завершены
У меня есть страница стиля таблицы со строками. Каждая строка имеет флажок. Я могу выбрать все/много флажков и нажать "отправить", а что есть JQuery ajax для каждой строки.
В принципе, у меня есть форма для каждой строки, и я перебираю все проверенные строки и отправляю ту форму, которая выполняет вызов jquery ajax.
Итак, у меня есть кнопка, которая делает:
$("input:checked").parent("form").submit();
Тогда каждая строка имеет:
<form name="MyForm<%=i%>" action="javascript:processRow(<%=i%>)" method="post" style="margin:0px;">
<input type="checkbox" name="X" value="XChecked"/>
<input type="hidden" id="XNumber<%=i%>" name="X<%=i%>" value="<%=XNumber%>"/>
<input type="hidden" id="XId<%=i%>" name="XId<%=i%>" value="<%=XNumber%>"/>
<input type="hidden" id="XAmt<%=i%>" name="XAmt<%=i%>" value="<%=XAmount%>"/>
<input type="hidden" name="X" value="rXChecked"/>
</form>
Эта форма отправляется в processRow:
function processRow(rowNum)
{
var Amount = $('#XAmt'+rowNum).val();
var XId = $('#XId'+rowNum).val();
var XNum = $('#OrderNumber'+rowNum).val();
var queryString = "xAmt=" + "1.00" + "&xNumber=" + OrdNum + "&xId=" + xId;
$('#coda_'+rowNum).removeClass("loader");
$('#coda_'+rowNum).addClass("loading");
$.ajax({
url: "x.asp",
cache: false,
type: "POST",
data: queryString,
success: function(html){
$('#result_'+rowNum).empty().append(html);
$('#coda_'+rowNum).removeClass("loading");
$('#coda_'+rowNum).addClass("loader");
}
});
}
То, что я хотел знать, состоит в том, что я могу сказать, все ли мои Ajax-звонки завершены. Причина в том, что хотите включить/отключить кнопку отправки во время всех этих вызовов.
Спасибо и учтите, что мне пришлось манипулировать именами переменных из-за чувствительности приложения, поэтому многие из них могут быть дублированы.
Ответы
Ответ 1
Простой способ
Самый простой способ - использовать обработчик событий .ajaxStop()
:
$(document).ajaxStop(function() {
// place code to be executed on completion of last outstanding ajax call here
});
Трудный путь
Вы также можете вручную определить, включен ли какой-либо аякс-вызов:
Создайте переменную, содержащую количество активных соединений Ajax:
var activeAjaxConnections = 0;
перед открытием нового увеличения соединения Ajax эта переменная
$.ajax({
beforeSend: function(xhr) {
activeAjaxConnections++;
},
url (...)
in success
проверить часть, если эта переменная равна нулю (если это так, последнее соединение завершено)
success: function(html){
activeAjaxConnections--;
$('#result_'+rowNum).empty().append(html);
$('#coda_'+rowNum).removeClass("loading");
$('#coda_'+rowNum).addClass("loader");
if (0 == activeAjaxConnections) {
// this was the last Ajax connection, do the thing
}
},
error: function(xhr, errDesc, exception) {
activeAjaxConnections--;
if (0 == activeAjaxConnections) {
// this was the last Ajax connection, do the thing
}
}
Как вы можете видеть, я добавил также проверку на возврат с ошибкой
Ответ 2
Оптимальное решение было бы использовать;
$("body").ajaxStop(function() {
//Your code
});
Для получения дополнительной информации проверьте функцию jQuery.ajaxStop в http://api.jquery.com/ajaxStop/
Ответ 3
Может быть:
jQuery.active == 0
Украден из:
http://artsy.github.com/blog/2012/02/03/reliably-testing-asynchronous-ui-w-slash-rspec-and-capybara/
Дополнительная информация о StackOverflow:
jQuery.active функция
Ответ 4
Как просто просто использовать , если?
success: function(html){
if(html.success == true ){
$('#result_'+rowNum).empty().append(html);
$('#coda_'+rowNum).removeClass("loading");
$('#coda_'+rowNum).addClass("loader");
}
}