Jquery progressbar - downloads everything at once

Question

I would like to have a jQuery progress bar that updates depending on the status of the request on the server side. I base this code on this tutorial , but the file loader is used as the base (same as this question). I cannot get it to work the same without a file downloader. The problem is that the progress bar is only updated after process.php is complete. Instead of requesting an asynchronous update for progress, it expects the entire process to complete. I see only 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 the 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 on request ajax:

 <?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 done } } ?> 

Answer 1

AFAIK, PHP sessions are actually synchronous. This means that the Process.php script blocks the getProgress.PHP script from execution until Process.php is executed with the session.

So what happens:

• Process.php starts and calls session_start ()
• Server provides session control session_start ()
• getProcess.php starts and calls session_start ()
• The server blocks getProcess.php until the session is used.
• Process.php ends and closes the session.
• The server resumes getProcess.php and gives it control over the session.
• 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 saved after the script is completed without the need to call session_write_close (), but since the session data is locked to prevent simultaneous writing, only one script can run in a session at any time. [...]

I have not tested the following code since I do not have access to the server at the moment, but I think that it should work like this:

 <?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); } ?>