Updating AJAX refresh bar in php with multiple steps
I already know how to make a simple AJAX Progress Bar system type to upload a single file using the following setup ...
function pushData() {
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "dosomething.php");
ajax.send(formdata);
}
function progressHandler(event){
_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
}
function completeHandler(event){
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0;
}
function errorHandler(event){
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
_("status").innerHTML = "Upload Aborted";
}
However, I want to be able to make a progress bar based on the steps done on the doomething.php bage sent back to the handler.
For example...
Let's say I had the following code structure ...
//report back doing step1
//do step 1....
//report back doing step2
//do step 2....
etc...
I already know that my maximum number of steps will be "5". I want to be able to make the progress bar increment after each step is reported up to a maximum value of "5" steps. This means that when I am at step 1, of course the progress bar will show 20% complete, step 2 at 40%, etc.
How could I do something like this? Help is greatly appreciated.
EDIT - More details on what's being done.
As Benten stated, I could split it into 5 different pages, but it looks like it will cause more problems than solving this problem, since a lot of data then has to be transferred to each new page, not just use 1 page. For example. Step 1, I need to convert the data to something else. Step 2, I have to search for data. Step 3, I have to take all the data that I found when looking for data and then organize it and insert the information into the database. etc. These steps usually take about 5-10 seconds each, so I wanted the progress to show the answers.
source to share
To fulfill individual requests, you can write something like this (if yours is jQuery
loaded in $
):
$.get('step1.php', function(data){
$('#prog').css({width:data + '%'});
$.get('step2.php', function(data){
$('#prog').css({width:data + '%'});
//[...and so on]
});
});
Then in step1.php
[...] step5.php
:
<?php
//Do some really heavy lifting:
sleep(5);
//Return the progress
echo "20";
To add it to the original context, this might help you represent it better (still assumed $=jQuery
):
function completeHandler(event){
//Upload completed
_("status").innerHTML = 'File upload completed - doing step 1';
_("progressBar").value = 0;
$.get('step1.php', function(data){
_("status").innerHTML = 'Step 1 completed - doing step 2';
_("progressBar").value = data;
$.get('step1.php', function(data){
_("status").innerHTML = 'Step 2 completed - doing step 3';
_("progressBar").value = data;
//[...and so on]
});
});
}
source to share