Simple auto-reload ColdFusion 8 Ajax Demo

This post is more than 2 years old.

A user on my forums asked about creating a region on his web page that would auto reload, like what he saw on att.com. I used to have an auto-reloading item on coldfusionbloggers.org, and I thought I had blogged on it, but wasn't able to find it. Forgive the dupe if you remember an earlier entry about this. Anyway, here is a real simple example.

First, I'm to start with a page that uses cfdiv to load the content I want to reload.

<html>

<head> </head>

<body> <h2>Where is Oktoberfest?</h2>

<p> Foo </p>

<cfdiv id="ad" bind="url:ad.cfm" />

</body> </html>

The file I'm using, ad.cfm, will rotate between 4 ads, or pieces of content, or whatever. In my case it is a simple counter:

<cfparam name="session.counter" default="0"> <cfset maxAds = 4> <cfset session.counter++> <cfif session.counter gt maxAds> <cfset session.counter = 1> </cfif>

<cfoutput> <p> <b>This is ad #session.counter#</b> </p> </cfoutput>

So to start reloading the content, I'm going to set up a interval. I'll launch this using ajaxOnLoad:

<cfset ajaxOnLoad('setup')>

and here is setup:

function setup() { setInterval(reload,5000); }

This says, run the reload function ever 5 seconds. The reload function is pretty trivial:

function reload() { ColdFusion.navigate('ad.cfm','ad'); }

So all in all a very simple piece of code. I've included the entire template below.

<html>

<head> <script> function reload() { ColdFusion.navigate('ad.cfm','ad'); }

function setup() { setInterval(reload,5000); } </script> </head>

<body> <h2>Where is Oktoberfest?</h2>

<p> Foo </p>

<cfdiv id="ad" bind="url:ad.cfm" />

</body> </html> <cfset ajaxOnLoad('setup')>

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Adam Tuttle posted on 10/3/2008 at 11:43 PM

And of course the same could be done easily (and with less included JavaScript) using jQuery. Basically, replace your setup and reload functions with:

$(document).ready(function(){setInterval(function(){$('#ad').load('ad.cfm')}, 1000);});

Just providing alternatives. :)

Comment 2 by adam posted on 10/3/2008 at 11:48 PM

Raymond sometime things really bothers me. Mr. Allaire founded coldfusion and now he is CEO of brightcove.tv and this website is not coldfusion at all. this is really sad.

Comment 3 by James Edmunds posted on 10/4/2008 at 1:46 AM

@Adam - I was wondering who would be first to jump in and say that this is an easy job for jQuery ;)

Comment 4 by Raymond Camden posted on 10/4/2008 at 5:06 AM

These jquery folks are just like cf folks - always sticking their noses in and saying how much easier things are. ;)

Comment 5 by Adam Tuttle posted on 10/4/2008 at 5:49 AM

I like to think of jQuery as the ColdFusion of JavaScript.

Comment 6 by Misha posted on 10/4/2008 at 7:22 AM

To Adam:
Adam let me not agree with you about "brightcove.tv" it still under ColdFusion, just under TV domain they are using JSP, under COM they are using regular CFM (http://www.brightcove.com/i...

Plus it really not important what program languages they are using, its a business the goal is.....

Comment 7 by Raymond Camden posted on 10/4/2008 at 4:36 PM

@Adam Tuttle: I think Spry is the CF of Ajax Frameworks. I find it much more friendly then jQuery. (Note I said friendly, not powerful.) I don't mean that as a slight on jQuery at all. I'm _really_ beginning to appreciate it as I learn it more and more.

Comment 8 by Gary Fenton posted on 10/4/2008 at 6:22 PM

jQuery isn't just about AJAX, most of its functionality does other stuff and it has the most powerful DOM, CSS and XML selector function you can imagine. I'm disapointed with CF's XML manipulation abilities so I'm using jQuery to do it all at the client end. It makes the user experience faster and reduces work for the server.

Comment 9 by Raymond Camden posted on 10/4/2008 at 8:29 PM

@GF - Yeah, I know that. I tend to get lazy and say 'ajax' or 'js' alone and I really mean the whole thing. :)

Comment 10 by Tony Garcia posted on 10/7/2008 at 3:24 AM

hmmm...
your comment about Spry being the CF of js frameworks and then the follow up that it is friendly but not necessarily powerful (compared to jQuery) kind of implies that CF is also friendly but not powerful.

Comment 11 by Raymond Camden posted on 10/7/2008 at 4:57 AM

@Tony - I think maybe you are reading too much into my words. My comments about Spry and CF related mostly to the ease of use. I find Spry to be -extremely- well suited to the "I have data I want to load via AJAX and display" model. Much like CF makes "I have data in the db I want to load and display" easy.

Do I think Spry is as powerful as jQuery? No. Does that mean I'd never use Spry - heck no. Right now I'm learning jQuery still and I'll have to figure out the best time to use one over the other.

Comment 12 by Andy Sandefer posted on 10/10/2008 at 10:38 PM

@Ray
My cfdiv is passing variables through the URL and I'm trying to use your example to actually update a cfchart (contained in another page - i'm using the url bind on the cfdiv). When I call a function via proxy and then try to reload the cfdiv the URL vars don't exist anymore. I'm probably pretty close to solving this but if you know off the top of your head it would help me meet an deadline.

Thanks

Comment 13 by Raymond Camden posted on 10/10/2008 at 10:39 PM

Um, so are you saying the parent window has URL crap, and you want to load some div in the page, and you want to 'pass on' the URL stuff to it?