Question

I’d like to have a jQuery progress bar that updates based on the status of the server side request. I’m basing this code off of this tutorial but it uses a file uploader as its base (same as this question). I can’t get it to work quite the same without the file uploader. The problem is that the progress bar only updates after process.php is done. Rather than asynchronously asking for an update on the progress, it waits for the whole process to be done. I only see the data: data alert once.

Any ideas?

Webpage:

<form id="upload-form" action='process.php' method="post" target="upload-frame">
<input type="hidden" id="uid" name="UPLOAD_IDENTIFIER" value="<?php echo $uid; ?>" >
<input type="submit" value="Submit" />
</form>

<div id="progressbar"></div>

<iframe id="upload-frame" name="upload-frame" style="display:none"></iframe>

Process.php – called when form is submitted

<?php
session_start();
$varArray=array(1,2,3,4);
$_SESSION['total']=count($varArray);

foreach($varArray as $val){
    $_SESSION['current']=$val;
    sleep(2);
}
?>

javascript

$(document).ready(function() {
    var started = false;// This flag determines if the upload has started
    $(function() {
        // Start progress tracking when the form is submitted
        $('#upload-form').submit(function() {
            $('#progressbar').progressbar();// Initialize the jQuery UI plugin

            // We know the upload is complete when the frame loads
            $('#upload-frame').load(function() {
                // This is to prevent infinite loop
                // in case the upload is too fast
                started = true;
                // Do whatever you want when upload is complete
                alert('Upload Complete!');
            });

            // Start updating progress after a 1 second delay
            setTimeout(function() {
                // We pass the upload identifier to our function
                updateProgress($('#uid').val());
            }, 1000);
        });
    });

    function updateProgress(id) {
        var time = new Date().getTime();
        // Make a GET request to the server
        // Pass our upload identifier as a parameter
        // Also pass current time to prevent caching
        $.ajax({
            url: 'getProgress.php',
            type: "GET",
            cache: false,
            data: {'uid':id}, 
            dataType: 'text',
            success: function(data){
                alert("data: " + data);
                var progress = parseInt(data, 10);
                if (progress < 100 || !started) {
                    // Determine if upload has started
                    started = progress < 100;
                    // If we aren't done or started, update again
                    updateProgress(id);
                }
                // Update the progress bar percentage
                // But only if we have started
                started && $('#progressbar').progressbar('value', progress);
            }
        });
    }
}(jQuery));

getProgress.php – called by the ajax request:

<?php
session_start();
if (isset($_REQUEST['uid'])) {
    if (isset($_SESSION['total']) && isset($_SESSION['current'])) {
        // Fetch the upload progress data
        $total = $_SESSION['total'];
        $current = $_SESSION['current'];
        // Calculate the current percentage
        $percent_done = round($current/$total*100);
        echo $percent_done;
    }else{
        echo 100;// If there is no data, assume it's done
    }
}
?>

Answer 1

AFAIK, PHP sessions are actually synchronous. That means that the Process.php script is blocking the getProgress.php script from running until Process.php is done with the session.

So what happens is:

1. Process.php starts and calls session_start ()
2. The server gives session control to session_start ()
3. getProcess.php starts and calls session_start ()
4. The server blocks getProcess.php until the session is unused.
5. Process.php completes and closes the session.
6. The server resumes getProcess.php and gives it control over the session.
7. getProcess.php now sees that the process is complete.

See http://www.php.net/manual/en/function.session-write-close.php.

Session data is usually stored after your script terminated without the need to call session_write_close(), but as session data is locked to prevent concurrent writes only one script may operate on a session at any time. […]

I haven’t tested the following code since I don’t have access to a server at the moment but I imagine somethin like it should work:

<?php
$varArray=array(1,2,3,4);
session_start();
$_SESSION['total']=count($varArray);
session_write_close ();

foreach($varArray as $val){
    session_start();
    $_SESSION['current']=$val;
    session_write_close ();
    sleep(2);
}
?>