asked on

Implement HTML5 progress bar with CGI program

I am trying to figure out how to use a HTML5 "progress" tag to implement
a progress bar in conjunction with a CGI host program. The CGI is a compiled
C program which I can revise as necessary. This program will take a while
and I want to have the user sit there looking at the progress bar.

So, in my html I can update the progress bar like this:

<script>
var UpdateProgress = function(value) {
var pbar = document.getElementById('p');
pbar.value = value;
}
</script>

<progress id='p' value='0' max='100'>
</progress>

So I need to call UpdateProgress() supplying whatever percentage the
host program is at. My first thought was I would have the host program
output something like this:

print "content-type:text/plain\n\n"
print "25"
sleep 1
print "50"
sleep 1
print "75"
sleep 1
print "100"

and I would somehow intercept the data coming from the host and use
the value to call UpdateProgress(). But how do I intercept the data?
Anyway, nothing gets displayed in my browser until the host program
is done.

Sorry if this is dumb question but I am a newbie at this stuff.

COBOLdinosaur

If you initiate a request from the browser, then it is going just wait for the response.

To do what you want, you need to uses Ajax to initiate the server side process from an existing page that contains the progress element.

You actually have to use the progress event:
http://www.w3.org/TR/progress-events/

The bare bones script would look something like:

<script>
  var progressBar = document.getElementById("p"),
      client = new XMLHttpRequest()
  client.open("GET", "your.cgi")
  client.onprogress = function(pe) {
    if(pe.lengthComputable) {
      progressBar.max = pe.total
      progressBar.value = pe.loaded
    }
  }
  client.onloadend = function(pe) {
    progressBar.value = pe.loaded
  }
  client.send()
</script>

Open in new window

Cd&

ASKER CERTIFIED SOLUTION

jmckay321

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jmckay321

ASKER

Because it is correct.