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: ColdFusion,jQuery

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.

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

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

<cfoutput>
<script type="text/javascript">
$("##status").text("Status: Looking up your location...");
</script>
</cfoutput>
<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:

<cfloop array="#personArray#" index="friend">
    <cfset pbValue = Int((friendsToFind-myFriendsCount+1)/friendsToFind * 100) />
    ... snip ...
    <cfoutput>
        <script type="text/javascript">
         $("##status").text("Status: Looking up your friends locations - #pbValue#% complete...");
         $("##pb").progressbar('option','value',#pbValue#);
        </script>
    </cfoutput>
    <cfflush />
</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.