473,396 Members | 2,059 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

How to create a real-time JavaScript, PHP and MySQL progress bar?

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...and-javascript/

**Form.php**

Expand|Select|Wrap|Line Numbers
  1.     <html>
  2.     <head>
  3.     <title>File Upload Progress Bar of MySQL Data</title>
  4.     <link rel="stylesheet" type="text/css" href="style.css">
  5.     </head>
  6.     <body>
  7.     <div id="bar_blank">
  8.     <div id="bar_color"></div>
  9.     </div>
  10.     <div id="status"></div>
  11.  
  12.     <?php
  13.  
  14.  
  15.     $time_start = microtime(true);
  16.  
  17.     $mysqlserver = "localhost";
  18.     $user = "root";
  19.     $pass = "";
  20.     $db = "Profusion";
  21.  
  22.     $link = mysql_connect( "$mysqlserver", $user, $pass );
  23.     if ( ! $link )
  24.     die( "Couldn't connect to MySQL" );
  25.     //print "Successfully connected to server<P>";
  26.  
  27.     mysql_select_db( $db )
  28.     or die ( "Couldn't open $db: ".mysql_error() );
  29.     //print "Successfully selected database \"$db\"<P>"; 
  30.  
  31.     $result3=mysql_query("INSERT INTO dest_table.create_info SELECT * from   Profusion.source_cdr") or die(mysql_error());
  32.     $progress=mysql_affected_rows();
  33.  
  34.     $time_end = microtime(true);
  35.     $time = $time_end - $time_start;
  36.  
  37.     echo "Total time taken :"." ".round($time,6) . " s"; 
  38.  
  39.     ?>
  40.  
  41. 2nd file style.css
  42.     #bar_blank {
  43.     border: solid 1px #000;
  44.     height: 20px;
  45.     width: 300px;
  46.     }
  47.  
  48.     #bar_color {
  49.     background-color: #006666;
  50.     height: 20px;
  51.     width: 0px;
  52.     } 
  53.  
  54.     #bar_blank, #hidden_iframe {
  55.     display: none;
  56.     }
  57.  
  58.  
  59.  
  60. 3rd file
  61.  
  62.     **script.js**
  63.  
  64.     function toggleBarVisibility() {
  65.     var e = document.getElementById("bar_blank");
  66.     e.style.display = (e.style.display == "block") ? "none" : "block";
  67.     }
  68.  
  69.     function createRequestObject() {
  70.     var http;
  71.     if (navigator.appName == "Microsoft Internet Explorer") {
  72.     http = new ActiveXObject("Microsoft.XMLHTTP");
  73.     }
  74.     else {
  75.     http = new XMLHttpRequest();
  76.     }
  77.     return http;
  78.     }
  79.  
  80.     function sendRequest() {
  81.     var http = createRequestObject();
  82.     http.open("GET", "progress.php");
  83.     http.onreadystatechange = function () { handleResponse(http); };
  84.     http.send(null);
  85.     }
  86.  
  87.     function handleResponse(http) {
  88.     var response;
  89.     if (http.readyState == 4) {
  90.     response = http.responseText;
  91.     document.getElementById("bar_color").style.width = response + "%";
  92.     document.getElementById("status").innerHTML = response + "%";
  93.  
  94.     if (response < 100) {
  95.     setTimeout("sendRequest()", 1000);
  96.     }
  97.     else {
  98.     toggleBarVisibility();
  99.     document.getElementById("status").innerHTML = "Done.";
  100.     }
  101.     }
  102.     }
  103.  
  104.    function startUpload() {
  105.    toggleBarVisibility();
  106.    setTimeout("sendRequest()", 1000);
  107.    }
  108.  
  109. /* (function () {
  110. document.getElementById("myForm").onsubmit = startUpload;
  111. })();// i commented this out since this collects information from the form
  112.  
  113.  
  114. and the last file
  115.     **progress.php**
  116.  
  117.     <?php
  118.     session_start();
  119.  
  120.     $key = ini_get("session.upload_progress.prefix") . $result3;
  121.     if (!empty($_SESSION[$key])) {
  122.     $current = $_SESSION[$key]["bytes_processed"];
  123.     $total = $_SESSION[$key]["content_length"];
  124.     echo $current < $total ? ceil($current / $total * 100) : 100;
  125.     }
  126.     else {
  127.     echo 100;
  128.     }
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.
Jan 10 '14 #1
0 1834

Sign in to post your reply or Sign up for a free account.

Similar topics

5
by: Shane McBride | last post by:
Does anyone know of a Windows editor I can use to design a table from a MySQL database? I have a end-user catalog I need to create. Nothing fancy - just display a few fields. I could hand code...
2
by: E.N. | last post by:
Hi For testing & developing I try to create a stored proc using the mysql query tool. But it complains about syntax. I've tried to see what help and other samples could return but they do not...
2
by: Julia Briggs | last post by:
Hello, I've read quite a bit of discussion on different approaches of how to create a download progress meter that can be implemented into a Web site. I understand that by the very nature of...
1
by: Axel Dahmen | last post by:
Hi, I can't create local fragment hyperlinks or JavaScript hyperlinks in ASP.NET. It always appends the current path to any value. How can I switch that off? Examples: * ...
1
by: drclue | last post by:
So ok, I've written this fairly cool RESTish WSDL engine to talk to almost any WSDL defined SOAP engine on the net, and soon the simpler REST interfaces as well via a single interface. I've also...
3
by: gsoguerrilla | last post by:
Hi, I have limited knowledge in php and I am having trouble with uploading an image to a remote directory and resizing it if it's larger and renaming it to a unique id, while at the same time I...
3
by: ravikiranveluguleti | last post by:
hi, this is ravikiran i am working on a project(using java & mysql) that requires creation of a editable mysql file that contains all the data present in a particular table ,(like .mdb file that...
1
by: Bilwin | last post by:
Hi friends, i am a newbie to mysql. i am using mysql 5.0 and db designer 4. I have created a schema in DB designer and i connected to mysql 5.0 server. When i tried to exceute the sql script in...
5
by: plsHelpMe | last post by:
How to create dynamic javascript arrays using dojo toolkits Hello frens, I am in a big trouble. My objective is: I am having some categories shown by differnent radio buttons, on the click of...
2
by: santhosh1985 | last post by:
How to create a "Continuous Progress Bar" in C# I am using this code "progressBar1.Style = ProgressBarStyle.Continuous" but it is not working
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.