JQuery AJAXはループなしのajaxの成功で次の行のみを送信できますか？

Question

私は自分自身をループと配列で怒っている。私はチェックされているテーブル行を提出し、次の行が提出される前にajaxの成功を待っています。私はいくつかのことを試みたが、必要な行だけを得ることはできなかった。後で

この記事は、カウンターと右のトラックに私を得た私はおそらくPHP側でそれを整理できたが、私はそれがcahngesのフロントまで正しいようにしたいと思います：stack: Ajax counter混乱のため

申し訳ありませんと1つのスクリプトで複数回試してみましたが、この時点では失われています。それはスタックの岩、なぜ "安い価格"で大きな助け！おかげで、すべてのHTML

<form action="" method="POST" name="postForm"> 

<table width="200" border="1" cellspacing="1" cellpadding="1"> 
    <tr> 
     <td><span class="style1"> 
        <input type="checkbox" class="select_all" /> 
        .Select_all </span> 
     </td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td> 
      <input name="ClickMe" type="button" id="clickMe" value="Submit" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <input type="checkbox" class="box" name="row0" /> 
     </td> 
     <td> 
      <input value="0-image here" type="text" name="brd" class='item' /> 
     </td> 
     <td> 
      <input value="0-title here" type="text" name="mfg" class='item' /> 
     </td> 
     <td> 
      <input value="0-Category here" type="text" name="pcat" class='item' /> 
     </td> 
     <td> 
      <input value="0-Store cat here" type="text" name="scat" i class='item' /> 
     </td> 
     <td> 
      <input value="0-Condition here" type="text" name="cond" class='item' /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <input type="checkbox" class="box" name="row1" /> 
     </td> 
     <td> 
      <input value="1-image here" type="text" name="brd" class='item' /> 
     </td> 
     <td> 
      <input value="1-title here" type="text" name="mfg" class='item' /> 
     </td> 
     <td> 
      <input value="1-Category here" type="text" name="pcat" class='item' /> 
     </td> 
     <td> 
      <input value="1-Store cat here" type="text" name="scat" i class='item' /> 
     </td> 
     <td> 
      <input value="1-Condition here" type="text" name="cond" class='item' /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <input type="checkbox" class="box" name="row2" /> 
     </td> 
     <td> 
      <input value="2-1mage here" type="text" name="brd" class='item' /> 
     </td> 
     <td> 
      <input value="2-title here" type="text" name="mfg" class='item' /> 
     </td> 
     <td> 
      <input value="2-Category here" type="text" name="pcat" class='item' /> 
     </td> 
     <td> 
      <input value="2-Store cat here" type="text" name="scat" class='item' /> 
     </td> 
     <td> 
      <input value="2-Condition here" type="text" name="cond" class='item' /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <input type="checkbox" class="box" name="row3" /> 
     </td> 
     <td> 
      <input value="3-1mage here" type="text" name="brd" class='item' /> 
     </td> 
     <td> 
      <input value="3-title here" type="text" name="mfg" class='item' /> 
     </td> 
     <td> 
      <input value="3-Category here" type="text" name="pcat" class='item' /> 
     </td> 
     <td> 
      <input value="3-Store cat here" type="text" name="scat" class='item' /> 
     </td> 
     <td> 
      <input value="3-Condition here" type="text" name="cond" class='item' /> 
     </td> 
    </tr> 
    <td> 
     <input type="checkbox" class="box" name="row4" /> 
    </td> 
    <td> 
     <input value="4-1mage here" type="text" name="brd" class='item' /> 
    </td> 
    <td> 
     <input value="4-title here" type="text" name="mfg" class='item' /> 
    </td> 
    <td> 
     <input value="4-Category here" type="text" name="pcat" class='item' /> 
    </td> 
    <td> 
     <input value="4-Store cat here" type="text" name="scat" class='item' /> 
    </td> 
    <td> 
     <input value="4-Condition here" type="text" name="cond" class='item' /> 
    </td> 
    </tr> 
</table> 

Answer 1

ここでは、インデックスをカウンタとして使用するコード（テストされていない）を使用しています。

// your code redone with a counter. 
$(document).ready(function() { 

    //submit boxes 
    $("#clickMe").click(function() { 
     var boxes = $("input[type='checkbox' ]:checked"); 
     sendrow(boxes, 0); 
    }); 

}); 
function sendrow(boxes, index) { 

    if (boxes.length == 0 || index >= boxes.length) { 
     // no rows checked or all rows processed. 
     return; 
    } 
    var currentRow = $(boxes[index]).closest("tr"); 

    // load data 
    var data = {}; 
    currentRow.find("input[type='text']").each(function() { 
     data[this.name] = this.value; 
    }); 

    //ajax works 
    $.ajax({ 
     url: "postdata.php", 
     data: { 
      data: data 
     }, 
     type: 'post', 
     currentProcess: {rows:boxes, currentIndex:index}, 
     success: function (data) { 
      $('#success').append(data); 
      var nextIndex = ++this.currentProcess.currentIndex; 
      var boxes = this.currentProcess.rows; 
      if (nextIndex < boxes.length) { 
       sendrow(boxes, nextIndex); 
      } 
     } 
    }); 

} 

Answer 2

[OK]を、私は私の環境（Visual Studioの）でこの作業を得たので、私はにはいくつかの調整をしなければならなかった

$(document).ready(function() { 

//submit boxes 
$("#clickMe").click(sendrow); 

// find and send boxes 
num = 0; 

function sendrow() { 


    var boxes = $("input[class='box' ]:checked").length; //get count of boxes 
    var values = $("input[class='box' ]:checked").map(function() { 
     x = this.name; 
     //alert(x); 
    }).get(); 



    if (boxes >= 0 && num <= boxes) { //must be some boxes*/ 


     //alert('boxes='+boxes+' num='+ num); 

     //$("tr:has(input[name='row1']:checked)").each(function() { 

     //rowData(num); // gar rows 




     //////////////////////////////////////////////////////////////// 

     var data = {}; 
     //START ROW LOOP 
     //alert(' row num='+ num); 
     $("tr:has(input[name='row" + num + "']:checked)").each(function() { 

      var feild = this; 
      var values = ""; 
      //START FEILD LOOP 
      $('input', this).each(function() { 

       data[this.name] = this.value; 
       // data = $(this).val(); 
       //alert($(this).val()); 
      }); 
      //values = values.substring(1) ; //sneek peek data 

      // alert(data); 

     }); // get forms 

     ////////////////////////////////////////////////////////// 


     //ajax works 
     $.ajax({ 
      url: "postdata.php", 
      data: { 
       data: data 
      }, 
      type: 'post', 
      // dataType: 'json', 
      // contentType: "application/x-www-form-urlencoded", 

      success: function(data) { 

       $('#success').append(data); 

       num++ 
       //alert('num success ='+ num); 
       var next = num; 
       //alert('num increment ='+ num); 
       sendrow(); 
       //alert(data); 
      } 
     }); 


    } //end if num< boxes 
    else { 
     'num' + num + ' was met, no more rows'; 
     } 

    }; // end function 


}); //end document 

JSあなたはそれをあなたのものに戻すことができるはずです。

基本的には、すべてチェックされた行を取得し、次にどのクラスを処理するかを示すクラスを追加します。私が行を送ったとき、私はクラスを処理に変更し、それが終わったらクラスを取り除き、sendrowを呼び出して次の行を処理します。

また、処理クラスを削除するために、要求から成功関数への行をどのように渡したのか注意してください。

"status"という名前のセルを追加したので、そのセルがサーバーに当たることを証明することができました。

 $(document).ready(function() { 
      //submit boxes 
      $("#clickMe").click(function() { 

       var boxes = $("input[class='box' ]:checked"); 
       // add class to see what has to be processed 
       boxes.closest("tr").addClass("waiting"); 
       sendrow(); 
      }); 

     }); 

     // process rows 
     function sendrow() { 
      var boxes = $(".waiting"); 
      if (boxes.length == 0) { 
       // we are done 
       return; 
      } 

      var $row = $(boxes[0]); 
      $row.removeClass("waiting").addClass("processing"); 
      var row = $row.html(); 

      //ajax works 
      $.ajax({ 
       url: "WebService1.asmx/GetADate", 
       data: JSON.stringify({s:row}), 
       type: 'post', 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       rowprocessed:{ arow:$row}, 
       success: function (data, status) { 

        var rp = this.rowprocessed.arow; 
        rp.find("[name='status']").val(data.d); 
        rp.removeClass('processing') 
        sendrow(); 
       }, 
       error: function (one, two) { 
        debugger; 
       } 
      }); 
     }