Changing the for loop to execute functions one line at a time

I have a function that needs to run through each row of a table, grab a number from that cell, send that number to the url to get a json response, and then print something based on that. I almost work, but now that it just dumps the whole thing, I want it to use something like .each

to go through each line, then move on to the next. I am also working with jquery datatables. The script looks 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);
            }
        });
    }
});

      

Answer and everything works great, my question is how to loop them one at a time. Since in this example it imgreplace.html('checking ..');

goes through each row of the table simultaneously. I want it to process only one line and then success

move on to the next.

Update

To better explain why I do this, I agree that it is unnatural, given that I picked up from each cell to help create a unique URL-address s7url

. Each of them returns a response like this from a server that I have no control over:

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

      

Then I do something, knowing whether it is true or false:

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

      

I love scrappedcola's solution, but it led me to conclude that success never quits. I don't know why this is so. In the inspector tab, I can see that there is an answer similar to the one I pasted above. I tried to port the success to my own function, for example:

success: function(){ success(); } 

...

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

      

but it did not help.

Update 2

So, I gave up trying to coerce variables into success. Instead, I'll share with you my very ugly hack. On the 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 anyone cares, I have found a solution for my other success

not shooting problem . I needed to add jsonpCallback

to parameters and then process the response as a function in succcess

.

+3


source to share


2 answers


Something like this might work for you. Basically you should make 1 call to the image validation function which makes an asynchronous call. Then, after the asynchronous call succeeds, move on to the next line.



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

      

0


source


If you want you should use a little recursion

function makeCall(rows, index) {
    //if index is undefined, it the first call, let start from the first element
    if (index === undefined) {
        index = 0;
    }
    row = rows[index];
    grabsku = $j(row).find('td:eq(2)').text();
    imgreplace = $j(row).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 ..');
            var nextIndex = index + 1;
            //if there is anothe element in rows, make another call)
            if (rows[nextIndex] !== undefined) {
                makeCall(rows, nextIndex);
            }
        },
        success: function() {
            imgreplace.html(z);
        }
    });
}

       var rows = oTable.fnGetNodes();
       makeCall(rows);

      



BTW - AJAX is awesome because you can make a lot of calls at the same time, waiting, it seems unnatural to me!

0


source







All Articles