Question

I have a function that is to run through each row of a table, grab the number from that cell, send that number to a url to fetch a json response, then print something based on that. I almost have it working but as it is now it is just dumping these all out at once, I want it to use something like .each to go through each row, do its stuff then move to the next. I am also working with jquery datatables. The script is like this :

$j('#imageCheck').click(function(){
    var cells = [];
    var rows = oTable.fnGetNodes();
    for( var i=0;i<rows.length;i++){
        grabsku = $j(rows[i]).find('td:eq(2)').text();
        imgreplace = $j(rows[i]).find('td:eq(2)');
        s7url = 'http://checkit.com/is/image/' + grabsku;       

        $j.ajax({
            type: 'GET',
            url: s7url,
            data: 'req=exists,json',
            dataType: 'jsonp',
            beforeSend:function(){
                imgreplace.html('checking ..');
            },
            success: function(){
                imgreplace.html(z);
            }
        });
    }
});

The response and everything works fine, my question is how to loop these one by one. So as in this example the imgreplace.html('checking ..'); happens simultaneously through every row in the table. I want it to just process that one row and after success move on to the next.

Update

To better explain why I am doing it this way, I agree it is unnatural, the data I grabbing from each cell helps form a unique url, s7url. Each of these returns a response like this from a server I have no control over:

s7jsonResponse(
{"catalogRecord.exists":"0"},"");

I then do something with knowing if true or false like this :

function jsonResponse(response){    
    x = response["record.exists"];  
    z = x == "0" ? "NO" : "YES";
}

I like scrappedcola’s solution but it led me to discover that the success is never being fired. I am not sure why that is. I can see in the inspector tab that there is a response like I pasted above. I tried to move the success into its own function, something like :

success: function(){ success(); } 

...

var success = function(){
    imgreplace.html(z);
    i++;
    handleImageCheck(i);    
}

but that didnt help..

Update 2

So I gave up trying to put the variables into success. Instead I will share with you my very ugly hack. On success of the error response, ick.

error: function(data, status){
        if (status = "parseerror") {
            imgreplace.html(z);
            i++;
            handleImageCheck(i);    
        }
    }

Update 3

If for some reason anybody cares, I found the solution for my other problem of success not firing. I needed to add jsonpCallback to the options and then process the response as a function in the succcess.

Answer 1

Something similar to this might work for you. Basically you should make 1 call to the image check function that makes the async call. Then upon success of the async call go to the next row.

var i;  
  $j('#imageCheck').click(function(){ 
     i = 0;
     handleImageCheck(i);
  })
  var handleImageCheck = function(i){
     var cells = [];
     var rows = oTable.fnGetNodes();
     if($j(rows[i]).length)
     {     
    grabsku = $j(rows[i]).find('td:eq(2)').text();
    imgreplace = $j(rows[i]).find('td:eq(2)');
    s7url = 'http://checkit.com/is/image/' + grabsku;       

    $j.ajax({
      type: 'GET',
       url: s7url,
       data: 'req=exists,json',
       dataType: 'jsonp',
       beforeSend:function(){
          imgreplace.html('checking ..');
       },
       success: function(){
          imgreplace.html(z);
          i++;
          handleImageCheck(i);
       }
     });
    }
  }