1. ホーム
  2. jquery

すべてのajax呼び出しが完了したことを知る方法

2023-10-15 06:01:04

質問

行を持つテーブルスタイルのページがあります。各行にはチェックボックスがあります。私はすべて/多くのチェックボックスを選択し、"submit"をクリックすることができ、それが行うことは各行の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 の部分は、その変数が0に等しいかどうかをチェックします(等しい場合、最後の接続は終了しています)。

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

見ての通り、エラーで戻るかどうかのチェックも追加しています。