I have been struggling with this progress bar for a while now I need to know whether it is possible to have a real time progress bar for MySQL insertions since database operations are relatively very fast. I have already browsed a few demonstrations but they all relate to data being sent to a form instead and they all seem to work perfectly.
I actually have 4 files and this is implemented based on the tutorial with this link
http://www.sitepoint.com/tracking-upload-progress-with-php-and-javascript/
**Form.php**
<html>
<head>
<title>File Upload Progress Bar of MySQL Data</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="bar_blank">
<div id="bar_color"></div>
</div>
<div id="status"></div>
<?php
$time_start = microtime(true);
$mysqlserver = "localhost";
$user = "root";
$pass = "";
$db = "Profusion";
$link = mysql_connect( "$mysqlserver", $user, $pass );
if ( ! $link )
die( "Couldn't connect to MySQL" );
//print "Successfully connected to server<P>";
mysql_select_db( $db )
or die ( "Couldn't open $db: ".mysql_error() );
//print "Successfully selected database \"$db\"<P>";
$result3=mysql_query("INSERT INTO dest_table.create_info SELECT * from Profusion.source_cdr") or die(mysql_error());
$progress=mysql_affected_rows();
$time_end = microtime(true);
$time = $time_end - $time_start;
echo "Total time taken :"." ".round($time,6) . " s";
?>
2nd file style.css
#bar_blank {
border: solid 1px #000;
height: 20px;
width: 300px;
}
#bar_color {
background-color: #006666;
height: 20px;
width: 0px;
}
#bar_blank, #hidden_iframe {
display: none;
}
3rd file
**script.js**
function toggleBarVisibility() {
var e = document.getElementById("bar_blank");
e.style.display = (e.style.display == "block") ? "none" : "block";
}
function createRequestObject() {
var http;
if (navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
http = new XMLHttpRequest();
}
return http;
}
function sendRequest() {
var http = createRequestObject();
http.open("GET", "progress.php");
http.onreadystatechange = function () { handleResponse(http); };
http.send(null);
}
function handleResponse(http) {
var response;
if (http.readyState == 4) {
response = http.responseText;
document.getElementById("bar_color").style.width = response + "%";
document.getElementById("status").innerHTML = response + "%";
if (response < 100) {
setTimeout("sendRequest()", 1000);
}
else {
toggleBarVisibility();
document.getElementById("status").innerHTML = "Done.";
}
}
}
function startUpload() {
toggleBarVisibility();
setTimeout("sendRequest()", 1000);
}
/* (function () {
document.getElementById("myForm").onsubmit = startUpload;
})();// i commented this out since this collects information from the form
and the last file
**progress.php**
<?php
session_start();
$key = ini_get("session.upload_progress.prefix") . $result3;
if (!empty($_SESSION[$key])) {
$current = $_SESSION[$key]["bytes_processed"];
$total = $_SESSION[$key]["content_length"];
echo $current < $total ? ceil($current / $total * 100) : 100;
}
else {
echo 100;
}
I need to show a progress bar as data is inserted into mysql and the total time taken for the query to execute. there are currently 28 rows to be inserted so it's not that big. Everything else seems to work except that the progress bar won't get displayed.