Bob's Blog

Adding a Dynamic jQuery Progressbar to the ColdFusion Twitter/Google Maps Mashup

Posted At : May 12, 2009 10:33 AM | Posted By : Bob Silverberg
Related Categories: jQuery, ColdFusion

Because my ColdFusion driven Twitter/Google Maps Mashup is so slow, I decided that it would be nice to have a dynamic progress bar, which updates the status as each of the user's friend's addresses are being looked up. I knew that the jQuery UI project has a Progressbar widget, so I did a quick Google for "jQuery Progressbar ColdFusion", and, no big surprise, came across a blog post by Ray Camden on the topic. That was enough to get me started, but Ray didn't cover creating a dynamic progress bar that is updated by the currently running page.

I figured that I could build something using cfflush, and I was not mistaken. Here's a summary of what I did:

When the form is submitted I first load the required CSS and JS files, and then create a div for my Progressbar and Status message, after which I attach the Progressbar to the div. Then I call cfflush to push all of that to the browser.

view plain print about

1<cfoutput>
2<link type="text/css" rel="stylesheet" href="jquery-ui-1.7.1.custom.css" />
3<script src="jquery-1.3.2.js"></script>
4<script type="text/javascript" src="ui.core.js"></script>
5<script type="text/javascript" src="ui.progressbar.js"></script>
6<div id="pb" style="width: 500px;"></div>
7<div id="status" style="width: 500px;" align="center">Status: Asking Twitter for your friends...</div>
8<script type="text/javascript">
9 $("##pb").progressbar({value:0});
10</script>
11</cfoutput>
12<cfflush />

Next I'm asking Google Geocode to look up the user's location, so I update the status:

view plain print about

1<cfoutput>
2<script type="text/javascript">
3 $("##status").text("Status: Looking up your location...");
4</script>
5</cfoutput>
6<cfflush />

Then I loop through all of the user's friends, trying to look up their location. Note that this snippet is abridged to just show the status update code:

view plain print about

1<cfloop array="#personArray#" index="friend">
2    <cfset pbValue = Int((friendsToFind-myFriendsCount+1)/friendsToFind * 100) />
3    ... snip ...
4    <cfoutput>
5        <script type="text/javascript">
6         $("##status").text("Status: Looking up your friends locations - #pbValue#% complete...");
7         $("##pb").progressbar('option','value',#pbValue#);
8        </script>
9    </cfoutput>
10    <cfflush />
11</cfloop>

This all works perfectly well on my dev machine, using Apache as the web server, but it didn't seem to work quite as well in my online demo. I did some googling and it seems that there are some issues with cfflush and IIS, which I am in the process of investigating. Expect an update in the near future.

As always, the complete code for the mashup is attached to this post.