I’m creating an app that sends an AJAX request to a PHP page. I’d like to have a progress bar for the time it takes to complete the request. Note that the PHP page creates a file and writes to it within some sort of loop.
Can this be done? So far, I’ve not found a single reliable source that…
1.) Clearly explains any and all steps required.
2.) Works.
3.) Uses jQuery. (I’m not opposed to fundamental JavaScript at all but I’d prefer jQuery since the rest of the app uses it already.)
From the research I’ve done up to this point, it seems that the success of the response is contingent upon whether the content size is returned… Is this true? I’ve found that when the PHP page creates a file, the response usually trips the error condition in the AJAX call, but I’m not sure why…
Here’s the PHP I’m toying with (test.php):
<?php
file_put_contents('file.tmp', '', FILE_APPEND);
ob_start();
for($i=0;$i<10000;$i++){
var_dump($i);
file_put_contents('file.tmp', $i."\n", FILE_APPEND);
}
rename('file.tmp', 'final.txt');
$length = ob_get_length();
header('Content-Length: '.$length."\r\n");
header('Accept-Ranges: bytes'."\r\n");
ob_end_flush();
?>
Long story short, the AJAX sends the request over to that file and the intended purpose of it is to create a temporary file that gets written to in the FOR loop… After everything is written, the temporary file is renamed to “final.txt” whereby the content length is supposed to be used in the header call before flushing the buffer.
Now, the jQuery I’m using is as follows:
$('#test').click(function(e){
$.ajax({
method: 'GET',
url: 'test.php',
dataType: 'json',
success: function() { },
error: function() { },
progress: function(e) {
//make sure we can compute the length
console.log(e);
if(e.lengthComputable) {
//calculate the percentage loaded
var pct = (e.loaded / e.total) * 100;
//log percentage loaded
//console.log(pct);
$('#progress').html(pct.toPrecision(3) + '%');
}
//this usually happens when Content-Length isn't set
else {
console.warn('Content Length not reported!');
}
}
});
});
When I execute this, it does basically work but the percentage indication (inside of #progress) isn’t. Instead of seeing a gradual calculation of the percentage values, it instead either doesn’t show or else suddenly shows 100%. It works better when a file write isn’t occurring in test.php, but since I need test.php to write files, well, I need to figure out what’s happening with the AJAX request…
Any ideas what’s going on here? Maybe an all-around better way exists? If so, I’d love to know about it. 
(Mods: feel free to move this if necessary…)