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')>