У мене є сторінка стилю таблиці з рядками. Кожен рядок має прапорець. Я можу встановити всі / багато прапорців і натиснути "надіслати", а що робить, це виклик 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 завершені. Причиною є те, що потрібно ввімкнути / вимкнути кнопку надсилання під час проведення всіх цих дзвінків.

Дякуємо і зауважте, що мені довелося перекручувати імена змінних через чутливість програми, тому багато з них можуть дублюватися.

Простий спосіб

Найпростіший спосіб - використовувати .ajaxStop()обробник подій :

$(document).ajaxStop(function() {
  // place code to be executed on completion of last outstanding ajax call here
});

Важкий шлях

Ви також можете вручну виявити, чи будь-який дзвінок ajax все ще активний:

Створіть змінну, що містить кількість активних з'єднань Ajax:

var activeAjaxConnections = 0;

безпосередньо перед відкриттям нового з'єднання Ajax збільште цю змінну

$.ajax({
  beforeSend: function(xhr) {
    activeAjaxConnections++;
  },
  url (...)

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

Як бачите, я додав також перевірку повернення з помилкою

Охайним рішенням буде використання;

$("body").ajaxStop(function() {
    //Your code
});

Для отримання додаткової інформації перегляньте функцію jQuery .ajaxStop за адресою http://api.jquery.com/ajaxStop/

Може бути:

jQuery.active == 0

Викрадено з:

http://artsy.github.com/blog/2012/02/03/reliably-testing-asynchronous-ui-w-slash-rspec-and-capybara/

Докладніше про StackOverflow:

jQuery.active функція

Як щодо просто використовувати if ?

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

          }
   }