Real-time “AJAX” JavaScript Progress Bar

07 Nov

by: Matt in Development, JavaScript, PHP

tags: ajax, iframe, JavaScript, long polling, php, progress bar

Hello there! If you find this post interesting you might want to follow me on twitter @imsnakes and subscribe to the RSS feed.

UPDATE 2011-01-23: I've revisited this old trick and fixed some bugs some of which were in the comments, so thanks. The changes are the setTimeout in the parent window's update function (to give the DOM some time to render) and the use of str_pad to force the browser to begin parsing/execution.

I've been developing a stock market screener with some advanced functionality. Some of the parameters a user might enter, because of their complexity or sheer volume of data required to calculate, would cause the screener to run for considerable amounts of time before returning results. The opportunity to create a progress bar presented itself. EVERY DEVELOPER LOVES CREATING PROGRESS BARS.

The technique is fairly straightforward. Here's an overview:

Dynamically create a hidden IFRAME
Post to the IFRAME
Backend script outputs (in real-time) individual <SCRIPT> tags to the IFRAME.
Each <SCRIPT> tag contains a single function call to the parent of the IFRAME ( parent.myFuncName(); )
Parent JavaScript function updates the status bar with newly passed parameters

A bit of background information. The "processing" thead is initiated when a user hits the 'Screen' button. It's an AJAX request to a PHP backend. While executing, for each iteration, it sets status variables in memcache. These are the variables that our "status" thread will be able to fetch.

Note: There are a variety of ways I can think of to use this same technique to achieve a real-time progress bar satisfying different situations. For example, your "processing" thread can be your "status" thread if, for each iteration, it outputs the necessary calls we'll discuss below. That would allow you to avoid the situation of delivering status data to a seperate thread via memcache (or some other technology).

I previously had been using an AJAX long-polling technique to achieve this. If you're not familiar with AJAX long-polling it's essentially when you make a subsequent AJAX request on completion of the prior request to achieve a simulated, continual, "stream" from a server. The problem in using this technique for a progress bar is two-fold:

Multiple, continual, repeated requests to a web server.
The data "stream" is pseudo real-time and is affected by variations in each request's latency. Not very pretty.

All examples below utilize the Prototype JavaScript library.

Create the hidden IFRAME

// create status iframe
var statusFrame = new Element('iframe', { id: 'statusFrame', name: 'statusFrame' }).hide();
$$('body')[0].appendChild(statusFrame);

Post to the IFRAME

// create status form
var statusForm = new Element('form', { action: '/stocks/screenstatus', method: 'post', target: 'statusFrame' });
$$('body')[0].appendChild(statusForm);

// post to iframe
statusForm.submit();

Backend script snippet to output <SCRIPT> tags

public function screenstatus()
{
        // pad to force the browser to starting parsing/executing
        echo str_pad('<html><body>', 4096);
	while(1) {
		//status string
		$status = Mcache::get('status');

		// how many have been processed
		$c = Mcache::get('c');

		// how many results
		$rc = Mcache::get('rc');

		// total
		$t = Mcache::get('t');

		echo str_pad('<script type="text/javascript">parent.updateStatus("'.$status.'", '.(int)$c.', '.(int)$rc.', '.(int)$t.');</script>'."\n", 1024);
		flush();

		if(($status === false) || ($status === 'canceled') || ($status === 'complete')) {
			break;
		}

		usleep(25000);
	}

        echo '</body></html>';
}

Parent JavaScript function to update progress bar

I chose to use a div with a background color and a dynamically adjusted width as the visual element for my progress bar. Initially the width is set to 0. In each updateStatus() call the width is adjusted to the current % of the whole (which in my case is 675px, the final desired width of the progress bar).

To overlay text I have a 2nd div styled 'position: relative;' with negative 'top' and 'bottom-margin'. This positions the textual div on top of the progress bar div.

#statusProgressBar {
width: 0px;
height: 29px;
background: #f4f4f4;
}
#statusProgress {
position: relative;
top: -29px;
left: 0;
text-align: center;
width: 675px;
padding-top: 3px;
height: 26px;
margin-bottom: -29px;
color: #00a;
font-size: 10px;
}

<div id="statusProgressBar"></div>
<div id="statusProgress"></div>

function updateStatus(status, c, rc, t)
{
	var statusHTML;
	var progressBarWidth;

	if(status == 'initializing') {
		$('statusProgressBar').setStyle({ width: '0px' });
		statusHTML = '<span id="top">Initializing...</span>';
	} else if(status == 'canceled') {
		$('statusProgressBar').setStyle({ width: '0px' });
		statusHTML = '<span id="top">Canceled... '+number_format(c / t * 100, 2)+'% Complete</span>';
	} else {
		if(t) {
			statusHTML = '<span id="top">'+rc+' result(s) ('+number_format((c ? (rc / c) : 0) * 100, 2)+'%)</span><br/><span id="bot">'+c+' of '+t+' processed ('+number_format(c / t * 100, 2)+'%)</span>';
		} else {
			statusHTML = '<span id="top">0 result(s)</span>';
		}
		progressBarWidth = Math.floor(675 * (c / t));
		$('statusProgressBar').setStyle({ width: progressBarWidth+'px' });
	}

        // give the DOM some time to actually render
        setTimeout(function() { $('statusProgress').update(statusHTML); }, 10);
}

You'll notice that the updateStatus() function calls number_format(). It's functionally equivalent to PHP's number_format(). Here is the JavaScript code below:

function number_format( number, decimals, dec_point, thousands_sep ) {
    // http://kevin.vanzonneveld.net
    // +   original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +     bugfix by: Michael White (http://getsprink.com)
    // +     bugfix by: Benjamin Lupton
    // +     bugfix by: Allan Jensen (http://www.winternet.no)
    // +    revised by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
    // +     bugfix by: Howard Yeend
    // *     example 1: number_format(1234.5678, 2, '.', '');
    // *     returns 1: 1234.57     

    var n = number, c = isNaN(decimals = Math.abs(decimals)) ? 2 : decimals;
    var d = dec_point == undefined ? "." : dec_point;
    var t = thousands_sep == undefined ? "," : thousands_sep, s = n < 0 ? "-" : "";
    var i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0;

    return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
}

I hope you found some of this code useful. I welcome comments and criticism!

If you liked this post, consider subscribing to our RSS feed!

notarealname

This really helped me out! It ‘looks’ like you need something special creating a progress bar, even if you have Visual Studio. I hope this will work !
Erik Oosterwaal

Hi Matt,
I have created something similar, but I’m running into a problem and I’m curious if you experienced this also (and how you solved it). I have a long running process that generates script tags in an iFrame that update the progressbar in the TOP(/parent) frame. The problem is that the JavaScript doesn’t seem to get executed because the other iFrame is too busy. In the end the progress bar jumps to 100%, but the in-between steps don’t get displayed. The problem is only visible when I really have a large data set (say 800 steps). If I have only 10 steps or so, the updates to the progressbar DO seem to work. BTW. I use IE 7 (not by choice, but the app is used in a corporate environment).
Matt

Erik,

Could you elaborate a bit on what you meant by “other iframe is too busy”? How many iframes are there? What is the other iframe doing?

Thanks for you question.

-Matt
TrazeK

I think I am experiencing the same problem as Erik. My progress bar is in the top frame. While my process executes, the script tags are printed within the iframe and I use javascript to try and edit an element outside the iframe. I think this solution only works if the progress bar is inside the iframe so everything is updated in real-time. Otherwise everything gets updated after the iframe is finished in the order they were called. It happens so fast it seems like the bar jumped from 0 to 100%. Excellent solution btw, as it pointed me to using the prototype framework.
Matt

Trazek,

In the example in the post (and how I’m currently using it on my site) the progress bar is in the parent window that contains a single child iframe. If you look at the javascript code the php script outputs it contains parent.updateStatus(blabla). The key item here is “parent.” which allows a child iframe (or window) to access code and elements of the parent window. It would be important to note that the code for the updateStatus function also resides in the PARENT.

Hope this helps.

-Matt
TrazeK

Thanks. Then perhaps I need to try actually redrawing the progress as in the example rather than just changing the width property per update.
TrazeK

Hey Matt, one more question. Is this status bar supposed to increment while the iframe is processing the request? If I use debug alert messages, I get all the status calls and the bar increments synchronously but if I take the alerts out, it appears to just to 100%. What could I be doing wrong?
http://battisti.wordpress.com Anselmo Battisti

Thx for your idea,

I was tring to do something like this but not using flush() unfortunly it’s apears impossible :(.

‘my soluction was’

this is out of iframe

a normal iframe with i use to execute the php functoin and it returns

echo ” parent.progress.setProgress(10,’10 of 100′);”;
flush();

and finaly the js funciton
var progress = {
setProgress: function(percent, text)
{
if(percent > 100 ) percent = 100;
$(‘percent’).innerHTML = text;
var largura = (percent /100) * parseInt($(‘container’).getStyle(‘width’) .substr(0, 3))-5;
$(‘progress’).setStyle( { ‘width’ : largura + “px” });

if (percent == 100) {
$(‘progress’).setStyle({‘backgroundColor’ : ‘green’ });
$(‘percent’).innerHTML = “Processamento Concluído.”;
}
}
}

works great :)
thx again
Matt

Trazek,

Yes, it’s a “real-time” status bar, its supposed to update dynamically.

Have you flushed and ended all of PHP’s output buffering layers?

Are you flushing output after each iteration?

Is it a browser issue? (what browser are you testing in?)

-Matt
TrazeK

Thanks for your response Matt. I am indeed buffering after each iteration but what I forgot to mention is I am using classic ASP and not PHP for my backend scripting language. I am following the same logic but now suspect it’s something going on with ASP and nothing else. I am going to investigate further. Thanks again.
TrazeK

Sorry, I mean flushing, not buffering after each iteration.
TrazeK

Ok, I was able to find my problem and all is well. It has nothing to do with ASP or the way it handles page buffering. The problem was I did not sleep() after each iteration and flush so there was not enough time to display each progress bar update. Now that I pause between update calls, it works as advertised. Thanks again!
Hoa Pham

Hi Matt,
I have a prob like Erik. The progress bar only displayed when the task is done. So I can not monitor the progress of task while it running. The code is below:

Back-end php (iframe):
set_time_limit(900);
do{
my_long_time_task();
echo “window.parent.update_prg(…);”;
ob_flush();
usleep(25000);
}while(!$done);

I am using PHP 5.2.9 – Apache 2.2.11
Thx
Hoa Pham

Hi all,
It work on FF 2 & IE 6, but IE 7 & FF 3 does not !
:-)
Matt

@hoa

Try ‘flush();’ not ob-flush. Also make sure you don’t have any output buffering enabled before entering the loop.

Finally, add a small sleep delay to the loop ‘usleep(25000);’
http://davidwoodfield.wordpress.com/2009/11/24/resources-for-php-webmail/ Resources for PHP Webmail « David Woodfield

[...] http://blog.perplexedlabs.com/2008/11/07/real-time-ajax-javascript-progress-bar/ [...]
mtthwkfmn

wow NICE…. :).
http://buzzknow.com Buzzknow

do you have any demo for this script?

thanks
http://blog.perplexedlabs.com matticakes

Check the update I just posted as I revisited this today :)

blog comments powered by Disqus

Subscribe in a reader

Real-time “AJAX” JavaScript Progress Bar

Recent Posts

Categories

Archives

Recent Entries

Recent Comments

Most Commented