How to display a progress bar during an ajax request (jquery/php)

Question

I have an ajax request, whereby I am installing a magento shop automatically, and when the process is done, it would redirect the user to the newly created shop. Here are my codes:

   function postSuccessFormData() {
    var targetUrl = '/index.php/install/wizard/successPost';

    jQuery('.form-button').addClass('loading');

   setInterval(installStatus(),4000);
    jQuery.ajax({
        url: targetUrl,
        global: false,
        type: 'POST',
        data: ({
            finish: 1,
            password_key: jQuery('#password_key').val()
        }),
        async: true,
        dataType: 'json',
        error: function() {
            alert("An error has occurred. Please try again.");
        },
        success: function(data) {
            window.location.href = '/';
        }

    });

function installStatus() {
    var installerUpdatesUrl = '/index.php/install/wizard/installerStatus';

    //showProgressBar();
    jQuery.ajax({
        url: installerUpdatesUrl,
       // global: false,
        type: 'GET',
        async: true,
        dataType: 'json',
        error: function (data) {
          //  alert(data.result);
        },
        success: function (data) {

        handle data.result
        var dataKeys = Object.keys(data);
        var lastElementKey = dataKeys[dataKeys.length - 1];
        var lastMessage = data[lastElementKey]['message'];

       if(data[lastElementKey]['progress'] == '') {
            updateProgressBar(data[dataKeys[dataKeys.length - 2]]['progress'],100);
        }

            setting message
            jQuery("#message").html(lastMessage);

            if (data[lastElementKey]['state'] == 'Failure') {
                var stepStr = lastElementKey.split('_');
                var stepString = stepStr[0].toUpperCase() + ' ' + stepStr[1] + ':';

                alert(stepString + "\n" + data[lastElementKey]['message']);
                //hideProgressBar();
                jQuery('.form-button').removeClass('loading');
                return false;
            } else if (data[lastElementKey]['state'] == 'Finish') {
                alert(data[lastElementKey]['message']);
                //hideProgressBar();
                jQuery('.form-button').removeClass('loading');
                //window.location.href = '/';
            } else {
               // installStatus();
            }
        },
        complete: function () {
            installStatus();
            jQuery('.form-button').removeClass('loading');

        }
    });
}

The way this is done:

After every 4 seconds the function installStatus is run, which will output the current progress in JSON format. My problem is, this function needs to be executed simultaneously with the function post().

This is not happening, the installStatus is only run after the first function has been completed.

What is wrong?

Answer 1

You are executing installStatus when you define it. So this:

setInterval(installStatus(),4000);

needs to be

setInterval(installStatus, 4000);

Answer 2

The new XMLHttpRequest has a nice progress event you can listen to show the user the upload progress.

Here's the spec with a nice demo: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress

Answer 3

Initially you should call installStatus() only once and then inside the method inside ajax success you should update the procent in the progress bar and call it recursively the same method. On the server side you can save the current procent in a cookie and with every recursive call you can update the cookie and return the procent.