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 output returned is appended to #upgradestatus. After that is completed upgrade.php?step=2 is called and that output is appended until the specified number of steps is completed.

Explanation: I'm attempting to create a plugin for software that runs in PHP. This plugin will call each step through the PHP file to upgrade each file, etc. I want to be able to display the progress on the page without reloading it to show the user what has been done and where the process is at.

Using my PHP thought process I wanted to create something similar to this:

for (var s=0; s<2; s++){
    $('#upgraderesult').load('upgrade.php', 'step=' + s, function() {
        $('#upgradestatus').append('Upgrade Step ' + s + ' Completed');
    });
}

I attempted to use .ajax() as well and with both of these methods I soon learned that being Async this is going to be a little more tricky to figure out.

My thought behind this was to create a FOR loop that would loop for the amount of steps there are. That for loop would then generate the necessary jQuery/Ajax code that will append to the existing div #upgradestatus with the status message. I wanted it to append the result loaded in #upgraderesult but to keep it simple i just added the "Upgrade Step X Complete".

So now i'm stuck and thinking I may just need to use PHP to generate the correct jQuery/Ajax code but I wanted to check and see if anybody else has any opinions or suggestions on how this could be done a different way or even if i'm thinking about this complete wrong.

All I want is to be able to call the PHP file based off the step in the process and then display the progress to the user in the browser...which has turned out to be a lot more difficult than i thought.

Thanks for any input or recommendations/suggestions, I greatly appreciate it!

not totally clear how all this software and progress ties together.... might consider having software update session and have an AJAX loop that gets details from session — charlietfl
– charlietfl, Commented Dec 29, 2012 at 23:42

sMyles · Accepted Answer · 2012-12-30 00:07:02Z

4

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.

answered Dec 30, 2012 at 0:07

sMyles

2,7343 gold badges36 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kenn · Accepted Answer · 2012-12-29 23:31:00Z

0

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.

answered Dec 29, 2012 at 23:31

Kenn

2,7793 gold badges31 silver badges61 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:43:06Z

0

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.

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Dec 29, 2012 at 23:38

Christian

28.3k18 gold badges117 silver badges162 bronze badges

Collectives™ on Stack Overflow

Using jQuery/Ajax with PHP to display current progress

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related