SPWD

Where we left off

If the first part of this short Coldfusion AJAX series, we discussed using the CFDIV tag, along with the CFAJAXIMPORT tag to enable us to dynamically load content into a div (cfdiv) layout container on the fly.  The only custom javascript we made was to create a function that our href called to key the Coldfusion.navigate feature.

This time we will be discussing submitting forms asynchronously using Coldfusion, the CFDIV and CFFORM tags.  This nifty feature allows web developers to submit their form within a containing div, and have the results of that form appear directly back to the user without reloading the entire page.  In part three, the final installment, we will discuss how to build a search suggestion form control that dynamically populates a search text box as the user is typing.

CFDIV and CFFORM tags

We’ve already discussed the CFDIV tag, but now we discuss the CFFORM tag.  The CFFORM tag is specific to Coldfusion and inserts forms into the page with server and client side processing, including built in validation for the tags contained within the form.  Speaking of the tags within the form, they take on special characteristics and names, rather than using the input tag, we will be using the CFINPUT tag.

To ensure the form submits via AJAX we will simply enclose our form within a CFDIV container, keeping in mind that we need to include the proper tags via CFAJAXIMPORT.  The other thing to note is on the CFDIV we are including the the page that contains our form as the bind parameter this time. The listing below is the complete listing for the form, note I have omitted the rest of the standard page elements (head, title, body etc.) for brevity. Provided you have your form handler script setup properly, in this case I called it formprocess.cfm in the example, the form will submit within the div.

Quick Code

<cfajaximport tags="cfform, cfdiv">
<cfdiv id="fomSub" name="formSub" bind="url:form.cfm">
</cfdiv></cfajaximport>

In the form.cfm file we would have the following:

Quick Code

<cfform action="formprocess.cfm" method="post&gt;
&lt;cfinput type=" text="" name="form1" id="form1" maxlength="45" size="20">
<cfinput type="submit" name="submit" id="submit" value="Submit">
</cfinput>
</cfform>

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 Quick Code

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.

Quick Code

<cfdiv id="myDiv" name="myDiv" bind="url:content.cfm">
</cfdiv>

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.

Quick Code

<html>
<head>
<title>Test Coldfusion Divs</title>
<script>
function loadContent()
{
Coldfusion.navigate("content.cfm", "myDiv");
}
</script>
</head>
<body>
<ul><li><a href="javascript: loadContent();">Change Content</a></li></ul>
<cfdiv id="myDiv" name="myDiv" bind="url:somestartercontent.cfm">
</cfdiv>
</body>
</html>

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.