Как узнать, когда все вызовы 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/

Ответ 4

Как просто просто использовать , если?

success: function(html){
   if(html.success == true ){
            $('#result_'+rowNum).empty().append(html);
            $('#coda_'+rowNum).removeClass("loading");
            $('#coda_'+rowNum).addClass("loader");

          }
   }