This Question have 1 answers right now.

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

Tags: ajax 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?



Answers

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

By : matdumsa


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