SPWD

Quick Coldfusion AJAX

Posted by Billy | Filed under ColdFusion, Web Design

External Library?

With Coldfusion 8 and 9, there are a full host of tools that you can use to enahnce user interactions and interfaces in your web apps.  One of those is the built in AJAX features.  While you can program your own, or even use an external javascript libarary, Coldfusion has it’s own, and it is very simple to use, cross-browser friendly and can be implemented in short order.

While you follow the rest of the post, do keep in mind that using the Coldfusion solution present, it does load files from your Coldfusion installation libraries.  These javascript files are sent to the browser just as any other javascript file.  Also remember that this is just one tag in the Coldfusion AJAX library – there are many others that support asynchronous form postings and much more.

Using CFDIV

The first thing you will want to do is import the necessary tag to use the cfdiv layout control.  You can do this by including [quickcode][/quickcode] The second thing is to ensure you have a .cfm file with the content you are loading into the cfdiv.  Say for this example we will call it content.cfm.

In your page, you simple call the cfdiv like you would a normal div layout container, with one exception – the bind parameter which tells it which .cfm page to load. Keep in mind, if you need to pass in url parameters, that is fully supported, making it that much more dynamic.

[quickcode]
[/quickcode]

Putting it together

To really make it work well, let’s show a sample page, complete with a simple javascript function that calls another Coldfusion ajax control, Coldfusion.navigate.  The Coldfusion.navigate function let’s us dynamically load the content into the cfdiv – so we could build a navigation menu and use that to dynamically load the content into our div.

[quickcode]

• Change Content

[/quickcode]
Now, we have a basic page that will load somestartercontent.cfm when the page loads, and when the visitor clicks on the change content link, it will run the javascript function that calls the Coldfusion.navigate function.  This will load the content.cfm page into the myDiv div.  Note the Coldfusion.navigate function takes two parameters in this scenario – the page to load and the div to load it in.

Tagged : Ajax, cfdiv, Coldfusion, coldfusion.navigate

Comments (0) | January 8th, 2010

Comments are closed.