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