Tuesday, January 15, 2013

Automatically Update cfdiv after every x seconds

One of my client asked me to provide him proof of concept that real-time auction website "swoopo.com" can be created in ColdFusion. The only real challenge in this project was real-time update of cfdiv after every x seconds.

For all those who don't know about cfdiv, here is the description from documentation.
Creates an HTML div tag or other HTML container tag and lets you use asynchronous form submission or a bind expression to dynamically control the tag contents.
Anyhow, to update cfdiv after every x seconds, you have to use Javascript. Here is the sample code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function updatestats()
{
_cf_loadingtexthtml=""; // This will remove "Loading..." preloader
ColdFusion.navigate('emp.cfm','GetDataNow');
}
</script>
</head>
<body onload="window.setInterval('updatestats()',1000)">
<cfdiv id="GetDataNow" bind="url:emp.cfm" />
</body>
</html>

You can see in this code that we have created a function Javascript "updatestats" which uses ColdFusion.navigate to update GetDataNow (cfdiv id). And also note that we used window.setInterval in onload event of body tag. The setInterval() method calls a function / evaluates an expression at specified intervals (in milliseconds), in our example 1000 or 1 second.

No comments:

Post a Comment