Jquery AJAX submit next row only on ajax success with no loop - possible counter?

Question

I'm working with loops and arrays. I want to submit table rows that are checked and wait for ajax success before next row is submitted. I tried a few things but no luck on getting only the rows I need. I could probably sort it out on the php side but I'd like it to be correct up front for changes later.

This article got me on the right track with a counter: stack: Ajax counter.

JS

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

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

here is an alternative using your code (untested) that uses an index as a counter.

// 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, I got this working in my environment (Visual Studio) so I had to make some adjustment to the ajax but you should be able to convert it back to yours.

Basically, I get all to rows that are checked then add a class to mark which ones should be processed. When I send a row off, I change the class to processing and when it is done, I remove the class and call sendrow to process the next row.

Also, take note how I passed the row from the request to the success function to to removed the processing class.

I added a cell with the name of "status" so I could stuff proof that it hit the server in it.

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