すべてのAjax呼び出しの終了後にページを更新する方法は？

Question

以下は私のjquery関数です。表示する列をチェックした後に追加の列を表示できるように、ページを更新する必要があります。現在、コード（location.reload（））を使用して、ajax呼び出しが完了する前にリフレッシュします。私はチェックボックスループの後に.promiseを試みたが、それは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イベントが発生したときにコールバックを管理するのに役立ちます。

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

また、あなたがsuccessを追加することができます：

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

最後に、より複雑な方法はajaxCompleteイベントを使用するあなたがいるかどうかを確認したいとき、これは便利ですdoneを使用して

Ajaxリクエストが完了しました。したがって、この時点で.ajaxComplete（）メソッドで登録されたすべてのハンドラが実行されます。この動作方法を観察するために

、基本的なAjaxのロード要求を設定します。

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

は、ドキュメントにイベントハンドラをアタッチ：今すぐ

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

、任意のjQueryのを使用してAjaxリクエストを作りますメソッド：

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

ユーザーがクラスdelete-numbersを持つ要素をクリックするとd Ajax要求が完了すると、ログメッセージが表示されます。

完了したAjaxリクエストに関係なく、すべてのajaxCompleteハンドラが呼び出されます。要求を区別する必要がある場合は、ハンドラに渡されるパラメータを使用します。 ajaxCompleteハンドラが実行されるたびに、イベントオブジェクト、XMLHttpRequestオブジェクト、および要求の作成に使用された設定オブジェクトが渡されます。

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

注：たとえば、あなただけの特定のURLを扱うイベントを処理するコールバックを制限することができますあなただけxhr.responseTextを見て、返されたAjaxの内容を取得することができます。

これで、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を行うが、リロードする何かを持っていない場合、あなたはcomplete機能の下にそれを置くことができる他、success下location.reload()を置くことができます。

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