Wie wird die Seite aktualisiert, nachdem alle Ajax-Anrufe beendet wurden?

Question

Hier ist meine jquery Funktion unten. Ich muss die Seite aktualisieren, damit ich die zusätzlichen Spalten anzeigen kann, nachdem sie überprüft haben, welche Spalten angezeigt werden sollen. Derzeit wird der Code (location.reload()) aktualisiert, bevor die Ajax-Aufrufe beendet werden können. Ich habe versucht, .promise nach der Checkbox-Schleife, aber es erlaubt mir nur 1 Kontrollkästchen zu übermitteln.

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

so etwas wie dieses Versuchen:

$('.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

Ich glaube, Sie Ihre location.reload verlagern sollte() aufrufen, wenn ein ajaxComplete-Ereignis tritt ein.

Der einfachste Weg ist done oder success Methoden in Ihren Code hinzuzufügen. Diese Methoden helfen Ihnen, die Rückrufe zu verwalten, wenn ein Ajax-Ereignis auftritt.

Mit done:

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

Sie können aber auch success hinzufügen:

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

Schließlich ist ein komplizierter Weg werden ajaxComplete Ereignisse verwenden, dies ist nützlich, wenn Sie wollen, wenn ein, um zu überprüfen Ajax-Anfrage ist abgeschlossen. Daher werden alle Handler, die mit der .ajaxComplete() - Methode registriert wurden, zu diesem Zeitpunkt ausgeführt.

Um diese Methode in Aktion zu beobachten, eine grundlegende Ajax Lastanforderung ein:

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

den Event-Handler auf das Dokument anhängen:

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

nun eine Ajax-Anfrage jede jQuery machen methode:

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

Wenn der Benutzer das Element mit der Klasse delete-numbers an klickt Wenn die Ajax-Anforderung abgeschlossen ist, wird die Protokollnachricht angezeigt.

Alle AjaxComplete-Handler werden aufgerufen, unabhängig davon, welche Ajax-Anforderung abgeschlossen wurde. Wenn Sie zwischen den Anforderungen unterscheiden müssen, verwenden Sie die an den Handler übergebenen Parameter. Jedes Mal, wenn ein ajaxComplete-Handler ausgeführt wird, werden das Ereignisobjekt, das XMLHttpRequest-Objekt und das Einstellungsobjekt übergeben, das bei der Erstellung der Anforderung verwendet wurde. Zum Beispiel können Sie den Rückruf nur Umgang mit Ereignissen zu tun mit einer bestimmten URL einschränken:

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

Hinweis: Sie können die zurückgegebenen Ajax Inhalte einfach durch einen Blick auf xhr.responseText bekommen.

Jetzt können Sie eine Nachricht anzeigen, wenn eine Ajax-Anfrage abgeschlossen ist.

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

Answer 3

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

JQuery AJAX

Answer 4

Wenn Sie etwas zu tun haben, nicht anders als nachladen onSuccess, können Sie location.reload() unter success setzen, sonst kann man es unter der complete Funktion setzen.

$.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(); 
    } 
});