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.
<link type="text/css" rel="stylesheet" href="jquery-ui-1.7.1.custom.css" />
<div id="pb" style="width: 500px;"></div>
<div id="status" style="width: 500px;" align="center">Status: Asking Twitter for your friends...</div>
Next I'm asking Google Geocode to look up the user's location, so I update the status:
$("##status").text("Status: Looking up your location...");
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:
<cfset pbValue = Int((friendsToFind-myFriendsCount+1)/friendsToFind * 100) />
... snip ...
$("##status").text("Status: Looking up your friends locations - #pbValue#% complete...");
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.