jquery ajax calls loop one after another without stoping of page rendering

Question

I have a table of of more then 100 rows.

each row consist of pdf files and their description with Last coloumn of STATUS.

STATUS SHOWS whether pdf files are readable are not.

Once table is loaded in the browser, I am geting each file name from every row of the table and processing it using ajax call. if file is readable, i update the status field of that row as READABLE. processing of each pdf file take 30sec to 1 minute (depending upon the size of file)

I don't want to use async call and send all of 100's of request to my server togather.

when I use async= false. it execute every ajax call one by one, that is what i want to do, but in the same time it stop user to browse the loaded table. so in other words user is kind of stuck untill all of those ajax requests are done. then he can scroll down to reader further information.

I want to allow user to read the web page while in the background i want to execute ajax requests one after another to process pdf files and update its status in every row.

How can I do that.

$('table.tableRecods tr').each(function(){

            fileWithPath = $('#filePath').text();
            $this = $(this);
            $this.find('td.status img.cropStatus').attr('src', 'img/loader.gif') ;           
                $.ajax({
                    url:'jsonCall.php',
                    async:false,
                    data: {file: escape(fileWithPath)},
                    success: function(data){        

                            if(data.status == 'true') {
                                $this.find('td.status img.readStatus').attr('src', 'img/icons/read.png') ;                                  
                            }else if(data.status == 'false'){
                                $this.find('td.status img.readStatus').attr('src', 'img/icons/__read.png') ;

                            }
                    }
                }); 

    });

I think thats what I am doing. read the question.

Developer
– Developer

2010-11-04 15:14:32 +00:00
Commented Nov 4, 2010 at 15:14 — Developer
– Developer, Commented Nov 4, 2010 at 15:14

thejh · Accepted Answer · 2010-11-04 16:08:29Z

9

Use asynchronous ajax. You could, for example, have an array with all the table rows you want to process, take the first one off the array and start a query for it. Put code in the listener that starts the next query when the last one finished.

var toRequest=new Array("test1", "test2", "test3");
function doRequest(index) {
  $.ajax({
    url:'jsonCall.php?data='+toRequest[index],
    async:true,
    success: function(data){        
      //do whatever you want do do

      if (index+1<toRequest.length) {
        doRequest(index+1);
      }
    }
  }); 
}
doRequest(0);

edited Nov 4, 2010 at 16:08

answered Nov 4, 2010 at 14:48

thejh

45.7k18 gold badges100 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Developer Over a year ago

won't not it make the browser busy while script is running. can you provide me any example what exactly you meant by above.

thejh Over a year ago

It won't. Please read a little bit about asynchronous Ajax. Oh, and I added an example.

Collectives™ on Stack Overflow

jquery ajax calls loop one after another without stoping of page rendering

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related