web-dev-qa-db-ja.com

すべての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呼び出しが完了したかどうかを確認できる方法があるということです。これらの呼び出しがすべて行われている間に送信ボタンを有効/無効にしたいという理由です。

おかげで、アプリケーションの機密性のために変数名をマングルしなければならなかったので、それらの多くが重複する可能性があることに注意してください。

jqueryajax
74
Brian G

簡単な方法

最も簡単な方法は、 .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
  }
}

あなたが見ることができるように、私はエラーで戻り値をチェックすることも追加しました

130
Tomasz Tybulewicz

きちんとした解決策は使用することです。

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

詳細については、 http://api.jquery.com/ajaxStop/ のjQuery .ajaxStop関数を参照してください。

23
Tebo

多分：

jQuery.active == 0

盗まれた：

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

StackOverflowの詳細：

jQuery.active function

14
nothing-special-here