Using jQuery/Ajax with PHP to display current progress

Question

Short and sweet: Looking for a way to call PHP file and display the progress using jQuery and/or Ajax. PHP file upgrade.php?step=1 is called and then the o

Answer 1

You can set a callback to run when you use ajax(), (post() would be the better alternative). Did you try that? Do you still have the code for when you tried ajax()?

It should be something like this.

$.post('upgrade.php?step=1', function() {
    $('#upgradestatus').append('Upgrade Step 1 Completed');
    $.post('upgrade.php?step=2', function() {
        $('#upgradestatus').append('Upgrade Step 2 Completed');
        $.post('upgrade.php?step=2', function() {
                $('#upgradestatus').append('All done!'); }
    }
});

Of course you could also return JSON and say Yeah, everything worked or whatever but the key is that you are using the callback to wait till it's finished to call the next step.

Answer 2

Everyone thank you for your input, with help from some of the guys in the Freenode #jQuery we were able to come up with this which works perfectly:

var numSteps = 2;
function loadStepAjax(s) {
    $.ajax('upgrade.php', {
        type: 'GET',
        dataType: 'html',
        data: {
           step: s
        },
        success: function(data) {
            $('#upgradestatus').append(data);
            if (s < numSteps)
                loadStepAjax(s+1);
            }
     });
}

You then call the function:

loadStepAjax(1);

Instead of using a FOR loop we created a function loadStepAjax and then used an IF statement on the callback to determine whether to call the function again.

It's always something simple isn't it! Thanks for everyone's input though, it is greatly appreciated.

Answer 3

There's another approach to this problem.

I wrote a comprehensive example as an answer to this question:

Processing large amounts of data in PHP without a browser timeout

PS: My example can be extended to also pass a message on each progress - in fact, it's quite flexible; you can make it up date only parts of the UI you want according to whatever is happening on the server, sparing the client from unnecessary processing.