Question

I am looking to show on screen a text-based description of what a PHP script is doing. e.g. trigger the function and then the PHP script starts. The user then sees “Step 1 started” … and then after a few seconds “Step 2 started” .. and so on. There could be hundreds of steps and I would like the user to see what is happening.

My jQuery:

$(document).ready(function() {
    $('#start').click(function() {
        $.ajax({
          url: "do.php",
          success: function( html ) {
              $("#results").append(html);
              return false;
          }
        });
    });
}); 

And then my PHP (illustrating the problem, my actual code does a lot of work):

echo "step 1 done";
sleep(2);
echo "step 2 done";
sleep(2);
echo "step 3 done";

At the moment the “result” div just shows “step 1 donestep 2 donestep 3 done” all in one go after 4 seconds. I would like it to show “step 1 done” and then after 2 seconds “step 2 done” and then after another 2 seconds “step 3 done”

Answer 1

Because of the asynchronous nature of Ajax you’d have to separate the steps in different php files and make multiple $.ajax requests within success callbacks or better yet, use deferreds.