Как обновить страницу после завершения всех вызовов ajax?

Question

Вот моя функция jquery ниже. Мне нужно обновить страницу, чтобы я мог отображать дополнительные столбцы после того, как они проверили, какие столбцы будут отображаться. В настоящее время с кодом (location.reload()) он обновляется до завершения вызовов ajax. Я пробовал .promise после цикла checkbox, но это только позволяет мне отправить 1 флажок.

Jquery

$('.delete-numbers').click(function() { 
     $('.number-chkbox').each(function() { 
      if (this.checked) { 
       $(this).attr('checked', true); 
       alert($(this).val() + " " + this.checked + "I GOT INNNN ADDDDD"); 
       $.ajax({ 
        url: '/PhoneBook/AddNumber', 
        data: { 
         Number: $(this).val(), 
         Name: name, 
         PhoneId: PhoneId 
        }, 
        type: "POST", 
        dataType: "html", 
        cache: false 
       }); 
      } else { 
       $(this).removeAttr('checked'); 
       alert($(this).val() + " " + this.checked + "I GOT INNNN REMOVE"); 
       $.ajax({ 
        url: '/PhoneBook/AddNumber', 
        data: { 
         Number: $(this).val(), 
         Name: name, 
         PhoneId: PhoneId 
        }, 
        type: "POST", 
        dataType: "html", 
        cache: false 
       }); 
      } 
     }) 
     location.reload(); 
    }); 

Html

<div class="modal-body form-group"> 
       @foreach (var item in Model.PhoneBook.OrderBy(a => a.Number)) 
       { 
        if (Model.AvailableNumbers.Any()) 
        { 
         if (Model.AvailableNumbers.Where(a => a.Number== item.Number).Count() != 0) 
         { 
          <input class="number-chkbox number" type="checkbox" checked="checked" name="@item.Number_Description" value="@item.Number"> 
         } 
         else 
         { 
          <input class="number-chkbox number" type="checkbox" name="@item.Number_Description" value="@item.Number"> 
         } 
         <label class="non-bold">@String.Format(" {0} - {1}", @item.Number, @item.Number_Description)</label> 
         <br /> 
        } 
        else 
        { 
         <input class="number-chkbox number" type="checkbox" name="@item.Number_Description" value="@item.Number"> 
         <label class="non-bold">@String.Format(" {0} - {1}", @item.Number, @item.Number_Description)</label> 
         <br /> 
        } 
       } 
      </div> 
<div class="modal-footer"> 
        <button type="submit" class="btn btn-danger delete-numbers" data-dismiss="modal">Yes</button> 
        <button type="button" class="btn btn-default cancel-number">No</button> 
       </div> 

Answer 1

Попробуйте что-то вроде этого:

$('.delete-numbers').click(function() { 
    var total = $('.number-chkbox').length; // what to wait for 
    var cnt = 0; //Nothing done yet 
    $('.number-chkbox').each(function() { 
     if (this.checked) { 
      $(this).attr('checked', true); 
      alert($(this).val() + " " + this.checked + "I GOT INNNN ADDDDD"); 
      $.ajax({ 
       url: '/PhoneBook/AddNumber', 
       data: { 
        Number: $(this).val(), 
        Name: name, 
        PhoneId: PhoneId 
       }, 
       type: "POST", 
       dataType: "html", 
       //cache: false //no need POST is never cached 
       success: function(data, status, xhr){ 
        //all you need to do 
        cnt++; 
        // It is safe. Javascript is single-thread so no concurrency issue may be expected 
        if(cnt == total)location.reload(); 
       }//success 
       error: function(xhr){ 
        cnt++; 
        if(cnt == total)location.reload(); 
       }//error 
      }); 
     } else { 
      $(this).removeAttr('checked'); 
      alert($(this).val() + " " + this.checked + "I GOT INNNN REMOVE"); 
      $.ajax({ 
       url: '/PhoneBook/AddNumber', 
       data: { 
        Number: $(this).val(), 
        Name: name, 
        PhoneId: PhoneId 
       }, 
       type: "POST", 
       dataType: "html", 
       //cache: false //see above 
       success: function(data, status, xhr){ 
        //all you need to do 
        cnt++; 
        if(cnt == total)location.reload(); 
       }//success 
       error: function(xhr){ 
        cnt++; 
        if(cnt == total)location.reload(); 
       }//error 
      }); 
     } 
    }) 
    //location.reload(); //never mix synch and asynch 
}); 

Answer 2

Я думаю, вы должны передислоцировать свой location.reload() вызов, когда Событие ajaxComplete имеет место.

Самый простой способ - добавить в ваш код done или success методов. Эти методы помогут вам управлять обратными вызовами при возникновении события ajax.

Использование done:

$.ajax({ 
    url: '/PhoneBook/AddNumber', 
    data: 
    ..., 
    ..., 
}).done(function(data) { 
    location.reload(); 
    }); 

Кроме того, вы можете добавить success:

$.ajax({ 
    url: '/PhoneBook/AddNumber', 
    data: { 
    ..., 
    ..., 
    success: function(data, status, xhr) { 
    location.reload(); 
    } 
}) 

Наконец, более сложный способ будет использовать событие ajaxComplete, это полезно Всякий раз, когда вы хотите проверить, если Запрос Ajax завершен. Таким образом, все и все обработчики, зарегистрированные в методе .ajaxComplete(), выполняются в это время.

Для наблюдения этого метода в действии, установите основной запрос Ajax нагрузки:

<div class="delete-numbers">Yes</div> 
<div class="result"></div> 
<div class="log"></div> 

Attach обработчик события к документу:

$(document).ajaxComplete(function() { 
    $(".log").text("Triggered ajaxComplete handler."); 
}); 

Теперь сделайте запрос Ajax с помощью любого JQuery метод:

$(".delete-numbers").click(function() { 
    $(".result").load("ajax/test.html"); 
}); 

Когда пользователь нажимает на элемент с номерами класса класса, d запрос Ajax завершается, отображается сообщение журнала.

Все обработчики ajaxComplete вызываются независимо от того, какой запрос Ajax был завершен. Если вы должны различать запросы, используйте параметры, переданные обработчику. Каждый раз, когда выполняется обработчик ajaxComplete, ему передается объект события, объект XMLHttpRequest и объект настроек, который использовался при создании запроса. Например, вы можете ограничить обратный вызов только обрабатывая события, касающиеся конкретного URL:

$(document).ajaxComplete(function(event, xhr, settings) { 
    if (settings.url === "ajax/test.html") { 
    $(".log").text("Triggered ajaxComplete handler. The result is " + 
     xhr.responseText); 
    } 
}); 

Примечания: Вы можете получить возвращаемое содержание Ajax, просто посмотрев на xhr.responseText.

Теперь вы можете показать сообщение, когда запрос Ajax завершен.

$(document).ajaxComplete(function(event,request, settings) { 
    $("#msg").append("<li>Request Complete.</li>"); 
}); 

Answer 3

$.ajax({ 
    ..., 
    ..., 
    success: function() {location.reload();} 
}) 

JQuery AJAX

Answer 4

Если у вас нет ничего, чтобы сделать, но перезаряжается OnSuccess, вы можете поставить под location.reload()success, иначе вы можете поместить его под функцией complete.

$.ajax({ 
    url: '/PhoneBook/AddNumber', 
    data: { 
     Number: $(this).val(), 
     Name: name, 
     PhoneId: PhoneId 
    }, 
    type: "POST", 
    dataType: "html", 
    cache: false, 
    success: function(response){ 
     ... do what you need here 
    }, 
    complete: function() { 
     location.reload(); 
    } 
});