How to display the progress of a server script in jQuery?

Question

With this code I can show an animated gif while the server script is running:

function calculateTotals() {
    $('#results').load('getResults.php', null, showStatusFinished);
    showLoadStatus();
}

function showLoadStatus() {
    $('#status').html('');
}


function showStatusFinished() {
    $('#status').html('Finished.');
}

However, I would like to display a status of how far along the script is, e.g. "Processing line 342 of 20000..." and have it count up until it is finished.

How can I do that? I can make a server-script which constantly contains the updated information but where do I put the command to read this, say, every second?

Answer 1

Your server-side script should somehow keep its progress somewhere on server (file, field in database, memcached, etc.).

You should have AJAX function returning current progress. Poll this function once a second and render result accordingly.

Answer 2

Without knowing how your server side code works it's hard to say. However, there are three stages to the process. Firstly you need to call a job creation script. This returns an id number and sets the server working. Next, every second or so, you need to call a status script which returns an status message that you want to display. That status script also needs to return a value indicating whether the job has finished or not. When the status script says the job has finished you stop polling.

How you get this status script is to know the status of the job depends greatly on how server is set up, but probably involves writing the message to a database table at various points during the job. The status script then reads this message from the database.

Answer 3

I'm not down with the specifics for jQuery, but a general answer that doesn't involve polling wold be: Use a variation of the forever frame technique. Basically, create a hidden iframe, and set the src of it to be 'getresults.php'. Inside getresults you "stream" back script blocks, which are calls to a javascrpt function in the parent document that actually updates the progress. Here's an example that shows the basic idea behind a forever frame. (I wouldn't recommend using his actual JS or HTML though, it's reasonably average)

Answer 4

After reading your comments to Andrew's answer.

You would read the status like this:

function getStatus() {
    $.getJSON("/status.php",{"session":0, "requestID":12345}, 
    function(data) { //data is the returned JSON object from the server {name:"value"}
          setStatus(data.status);
          window.setTimeout("getStatus()",intervalInMS)
    });
}

Using this method you can open several simultaneous XHR request on the server.

all your status.php as to output is :

{"status":"We are done row 1040/45983459"}

You can however output as many information you want in the response and to process it accordingly (feeding a progress bar for example or performing an animation..)

For more information on $.getJSON see http://docs.jquery.com/Ajax/jQuery.getJSON