Question

So i’m working on a project that will be using PHP to download files with CURL and update them on the server. I’ve already gotten that part taken care of and now i’m working on a front end gui that will display the progress to the user.

So my original thought method was to use the code in this manner:

$('#startupgrade').click(function() {
    $('#upgradeprogress').css({"width": "0%"});
    $('#upgradestatus').append('<p>Starting Upgrade...</p>');
    $('#upgradeprogress').css({"width": "10%"});
    $('#currentstep').load('upgrade.php #statusreturn', 'step=1');
    $('#upgradestatus').append('<p>Step 1 Complete...</p>');
    $('#upgradeprogress').css({"width": "20%"});
})

The thought behind this was to load the PHP page and pull a “status message” from the page which PHP generates in the ID #statusreturn which would then be appended to the current page if that step fails or is successful. In the example above I kept it simple and just went ahead and appended Step 1 Complete but i would add some type of standard JS in there to check if the first step was completed or not.

I’ve very new to JS and jQuery and I feel like there should be an easier or more correct way of doing this. Maybe running some standard JS using an if statement based on the number of steps?

Does anybody have any suggestions or recommendations on how this could be done with less code or in an easier manner? I want to make sure the method I end up using and learning will be correct and hopefully i’m not making newbie mistake and using more code than is necessary.

I appreciate any input and thanks for your help in advance.

The #upgradeprogress is using Twitter Bootstrap progress bar which is controlled by the width. The #upgradestatus is a Bootstrap well that will display the output almost similar to a terminal.

Answer 1

The load function is an asynchronous function. That means it will directly continue and not wait for the load. In order to wait for the load place your update of progress bar into the success callback handler:

http://api.jquery.com/load/

$('#result').load('steps/step1.php', function() {
  $('#upgradeprogress').css({"width": "10%"}); //update your status bar here

  $('#currentstep').load('upgrade.php #statusreturn', function() {
    $('#upgradeprogress').css({"width": "20%"});
    //add more steps here if required
  });
});

Only when that success function( ) is executed you can be sure the request was finished.