On my website (not the blog section), the menu items in the left column cause the content on the right to change without the page reloading. This was accomplished using a JavaScript function on the entry page to force navigation of a CFDIV using ColdFusion.navigate instead of a binding. The function ColdFusion.navigate requires two arguments, the URL and the ID of the specific CFDIV to display the URL content.
On the main page, in the HEAD, place the JavaScript function that each menu button will execute when the onClick event fires. Each button in your menu sends the URL information to the JavaScript function, which then sends it to the ColdFusion.navigate function and forces the CFDIV with your specific ID to load the new content using Ajax.
We add the bindonload attribute to the CFDIV tag so that our default content, encapsulated in the CFDIV, can call the JavaScript function with the first page to be loaded.
<script type="text/javascript">
fnAjaxPage = function(obj) {
ColdFusion.navigate(obj , "Category");}
</script>
<!-- MENU CHOICES -->
<input name="MenuButton1" type="button" value="Page One" onClick="fnAjaxPage('PageOne.cfm');" /><br />
<input name="MenuButton2" type="button" value="Page Two" onClick="fnAjaxPage('PageTwo.cfm');" />
<!--- AJAX CONTENT BEGIN --->
<cfdiv bindonload="false" id="Category">
<script type="text/javascript">fnAjaxPage(ﾓPageOne.cfm");</script>
</cfdiv>This example is based on the possibility of several different menu selections that will each result in a call to the ColdFusion.navigate function. This will cause the CFDIV to reload content without the entire page loading. Depending on the amount of content contained within the selected pages, the main page may shrink or grow with the amount of display information.
If you find this post useful please leave a comment and let me know how you used the information.
