how to implement jquery php progress bar

Question

I have a multi-step form where the form on Step3 submits to Step4.php. Step4 is a results page, and it takes some time to load, so I wanted to try and implement a progress bar or a loading bar or something when the user clicks the step3 submit button before Step4.php actually loads. I would think I could do this with jquery? But, I'm not sure how. Is it possible to do this without having to use jquery to post the data to step4.php?

Answer 1

It is very hard to do progress bars for ajax requests. You don't really have access to the request in a way to give the user accurate information with a progress bar. You are better off giving your users a spinner showing them that the script is working on loading things.

Answer 2

As peter says, this is very difficult to do from ajax. Often what people do instead is use a tiny Flash applet which provides the file upload and progress bars. I know both Gmail and Wordpress do this, many others as well. There are many pre-made ones that you just have to drop in and use:

• SWFUpload
• In-a-Flash Flash Upload Utility
• Flash File Uploader

Answer 3

If this is an upload progress bar:

The first part is installing something on the PHP side that you can hook into.

The APC extension includes an upload hook mechanism. You may already have this installed, as it's a common opcode cache for PHP (and will be included by default in PHP6).

Once APC is installed, you need to set up both the PHP page and PHP handler sides.

PHP page:

<?php
    $uploadId = uniqid('', true);
?>

<script type="text/javascript">
    function uploadProgress() {
        $.ajax({
            url: 'url/to/handler.php',
            data: ({ progressId: <?php echo $uploadId; ?> }),
            success: displayProgress
        });
    }

    function displayProgress(data) {
        // Do something with data['current'] and data['total'] here
        // Possibly using a JQuery UI Progressbar
        // http://jqueryui.com/demos/progressbar/
    }
</script>

...

<!-- Your other form elements would be on this form, too -->
<form action="step4.php" enctype="multipart/form-data">
<input type="hidden" name="APC_UPLOAD_PROGRESS" value="<?php echo uploadId; ?>" />
<input type="file" name="file" />
<input type="submit" onClick="setInterval(uploadProgress, 1000); return false;" />
</form>

You will also need a script on the PHP side to call via AJAX. It's been awhile since I've done AJAX with PHP, but something like this should do:

<?php
$returnData = array('current' => 0, 'total' => 0);

if (!empty($_GET['progressId'])) {

    $uploadProgress = apc_fetch('upload_' . $_GET['progressId']);
    if (!empty($uploadProgress)) {
        $returnData['current'] = $uploadProgress['current'];
        $returnData['total'] = $uploadProgress['total'];
    }
}

echo json_encode($returnData);

Edit: Whoops, there's nothing in the original post that says this is an upload progress bar

Answer 4

I solved this in a MySQL loading program by outputting a simple page with the progress bar, flushing the output with flush(). I then output a simple snippet of javascript:

    $('#progressbar').progressbar({value: 0});

I also call flush after outputting this JS snippet. You have to continually output these snippets each time you want to update the progressbar.