ColdFusion.navigate

Coldfusion 8 introduce new Ajax feature is ColdFusion.navigate. ColdFusion.navigate is JavaScript function which is displaying output in cfdiv, cfwindow, cfpod or cflayoutarea container. When browsers follow a link that is populated by this function, the link does not replace the page. It’s only populates the control specified by the container attribute.

Syntax:

[code:js]ColdFusion.navigate (URL [, container, callbackhandler, errorhandler, httpMethod, formId])[/code]

Example:

When user clicks on the button, the ColdFusion.navigate fuction navigate the url link and displaying in the container, and then calls the callback function.

The main page looks follow:

[code:html]
<html>
<head>
<script>
function fun_navigatePage(){
ColdFusion.navigate(‘LoadPage.cfm’,
‘pageContent’,fun_callback,”,’POST’,’frmNavigate’);
}
function fun_callback(){
document.getElementById(‘callbackContent’).innerHTML =
‘This is call back function.’;
}
</script>
</head>
<body>
<form name="frmNavigate" id="frmNavigate" method="post">
<label>First Name : </label>
<input type="text" name="firstname" id="firstname" value="" />
<br />
<label>Last Name : </label>
<input type="text" name="lastname" id="lastname" value="" />
<br />
<input type="button" name="btnNavigate" id="btnNavigate"
value="Navigate Page" onclick="fun_navigatePage()" />
</form>
<cfdiv id="pageContent" styel="background-color:##c0c0c0" />
</body>
</html>
[/code]

The Container page looks follow:

[code:cf]
<cfoutput>
<b>FirstName</b> : #form.firstname#<br />
<b>LastName</b> : #form.lastname#
<br />
<div id="callbackContent" style="background-color:##c0c0c0;" />
</cfoutput>
[/code]