what is the best way of showing progress on an ajax call

Question

i have an ajax call that updates 5,000 records in a database so this takes a lot of time. I have a ajax "Loading image" showing that something is happening but i am looking for a better way to show . . "Updating 50 of 5000 . . .", "Updating 200 of 5000", or something like that.

what is the best way to do something like this in ajax / jquery without doing 5000 different posts . . .

Answer 1

I am assuming that you have a reason for iterating through each record individually, instead of simply running a SQL statement.

If that is the case, simply make an ajax call every 200 or so iterations. If you do it for each group of 200 records, it will only consume 50 Ajax calls.

Something like (pseudocode):

If iterationNumber mod 200 == 0
    // Make Ajax call.

Answer 2

I am assuming you are currently using one POST for all records in the batch update and placing the loading image between call and return.

Rather than having the server wait to return until completing the update, have it return immediately with a special ID for that batch update. Then implement a server call that returns the status of the batch update, which your progress dialog can call to report the progress.

var progressCallback = function(data){
  //update progress dialog with data
  //if data does not indicate completion
    //ajax call status function with "progressCallback" as callback
});
//ajax call status function with "progressCallback" as callback

Answer 3

I would let the function that is doing the big update record in a SESSION variable its current progress after each single (or so many) update, and use a separate AJAX script to retrieve this progress value from the SESSION and let JavaScript use this to update your progress bar/text.