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