ColdFusion AJAX Programming

Exclusive offer: get 80% off this eBook here
ColdFusion 8 Developer Tutorial

ColdFusion 8 Developer Tutorial — Save 80%

An intense guide to creating professional ColdFusion web applications: get up to speed in ColdFusion and learn how to integrate with other web 2.0 technologies

₨190.00    ₨38.00
by John Farrar | April 2009 | AJAX Web Development

This article deals with AJAX programming in ColdFusion. ColdFusion acts a great platform not just because of its code features, but because of its characteristics as to how the code interacts with other features. ColdFusion is a language with depth and power. Yet, as we developers know, it seems real power always requires a bit of custom code. In this article by John Farrar, we will have a look at the following topics:

  • Binding
  • Proxy connections
  • JSON features
  • Spry data integration
  • Debugging

Binding

When it comes to programming, the two most commonly used features are CFAJAXProxy and binding. The binding feature allows us to bind or tie things together by using a simpler technique than we would otherwise have needed to create. Binding acts as a double-ended connector in some scenarios. You can set the bind to pull data from another ColdFusion tag on the form. These must be AJAX tags with binding abilities.

There are four forms of bindings, on page, CFC, JavaScript, and URL. Let's work through each style so that we will understand them well. We will start with on page binding. Remember that the tag has to support the binding. This is not a general ColdFusion feature, but we can use it wherever we desire.

On Page Binding

We are going to bind 'cfdiv' to pull its content to show on page binding. We will set the value of a text input to the div. Refer to the following code. ColdFusion AJAX elements work in a manner different from how AJAX is written traditionally. It is more customary to name our browser-side HTML elements with id attributes. This is not the case with the binding features. As we can see in our code example, we have used the name attribute. We should remember to be case sensitive, since this is managed by JavaScript. When we run the code, we will notice that we must leave the input field before the browser registers that there has been a change in the value of the field. This is how the event model for the browser DOM works.

<cfform id="myForm" format="html">
This is my edit box.<br />
<cfinput type="text" name="myText">
</cfform>
<hr />
And this is the bound div container.<br />
<cfdiv bind="{myText}"></cfdiv>

Notice how we use curly brackets to bind the value of the 'myText' input box. This inserts the contents into 'div' when the text box loses focus.

ColdFusion AJAX Programming

This is an example of binding to in-page elements. If the binding we use is tied to a hidden window or tab, then the contents may not be updated.

CFC Binding

Now, we are going to bind our div to a CFC method. We will take the data that was being posted directly to the object, and then we will pass it out to the CFC. The CFC is going to repackage it, and send it back to the browser. The binding will enable the modified version of the content to be sent to the div. Refer to the following CFC code:

<cfcomponent output="false">
<cffunction name="getDivContent" returntype="string" access="remote">
<cfargument name="edit">
<cfreturn "This is the content returned from the CFC for
the div, the calling page variable is '<strong>#arguments.edit#</strong>'.">
</cffunction>
</cfcomponent>

From the previous code, we can see that the CFC only accepts the argument and passes it back. This could have even returned an image HTML segment with something like a user picture. The following code shows the new page code modifications.

<cfform id="myForm" format="html">
This is my edit box.<br />
<cfinput type="text" name="myText">
</cfform>
<hr />
And this is the bound div container.<br />
<cfdiv bind="cfc:bindsource.getDivContent({myText})"></cfdiv>

The only change lies in how we bind the cfdiv element tag. Here, you can see that it starts with CFC. Next, it calls bindsource, which is the name of a local CFC. This tells ColdFusion to wire up the browser page, so it will connect to the CFC and things will work as we want. You can observe that inside the method, we are passing the bound variable to the method. When the input field changes by losing focus, the browser sends a new request to the CFC and updates the div. We need to have the same number of parameters going to the CFC as the number of arguments in our CFC method. We should also make sure that the method has its access method set to remote. Here we can see an example results page.

ColdFusion AJAX Programming

It is valid to pass the name of the CFC method argument with the data value. This can prevent exceptions caused by not pairing the data in the same order as the method arguments. The last line of the previous code can be modified as follows:

<cfdiv bind="cfc:bindsource.getDivContent(edit:{myText})"></cfdiv>

JavaScript Binding

Now, we will see how simple power can be managed on the browser. We will create a standard JavaScript function and pass the same bound data field through the function. Whenever we update the text box and it looses focus, the contents of the div will be updated from the function on the page. It is suggested that we include all JavaScript rather than put it directly on the page. Refer to the following code:

<cfform id="myForm" format="html">
This is my edit box.<br />
<cfinput type="text" name="myText">
</cfform>
<hr />
And this is the bound div container.<br />
<cfdiv bind="javascript:updateDiv({myText})"></cfdiv>
<script>
updateDiv = function(myEdit){
return 'This is the result that came from the JavaScript function
with the edit box sending "<strong>'+myEdit+'</strong>"';
}
</script>

Here is the result of placing the same text into our JavaScript example.

ColdFusion AJAX Programming

URL Binding

We can achieve the same results by calling a web address. We can actually call a static HTML page. Now, we will call a .cfm page to see the results of changing the text box reflected back, as for CFC and JavaScript. Here is the code for our main page with the URL binding.

<cfform id="myForm" format="html">
This is my edit box.<br />
<cfinput type="text" name="myText">
</cfform>
<hr />
And this is the bound div container.<br />
<cfdiv bind="url:bindsource.cfm?myEdit={myText}"></cfdiv>

In the above code, we can see that the binding type is set to URL. Earlier, we used the CFC method bound to a file named bindsource.cfc. Now, we will bind through the URL to a .cfm file. The bound myText data will work in a manner similar to the other cases. It will be sent to the target; in this case, it is a regular server-side page. We require only one line. In this example, our variables are URL variables. Here is the handler page code:

<cfoutput>
'This is the result that came from the server page with the edit
box sending "<strong>#url.myEdit#</strong>"'
</cfoutput>

ColdFusion AJAX Programming

This tells us that if there is no prefix to the browse request on the bind attribute of the <cfdiv> tag, then it will only work with on-page elements. If we prefix it, then we can pass the data through a CFC, a URL, or through a JavaScript function present on the same page. If we bind to a variable present on the same page, then whenever the bound element updates, the binding will be executed.

Bind with Event

One of the features of binding that we might overlook its binding based on an event. In the previous examples, we mentioned that the normal event trigger for binding took place when the bound field lost its focus. The following example shows a bind that occurs when the key is released.

<cfform id="myForm" format="html">
This is my edit box.<br />
<cfinput type="text" name="myText">
</cfform>
<hr />
And this is the bound div container.<br />
<cfdiv bind="{myText@keyup}"></cfdiv>

This is similar to our first example, with the only difference being that the contents of the div are updated as each key is pressed. This works in a manner similar to CFC, JavaScript, and URL bindings. We might also consider binding other elements on a click event, such as a radio button. The following example shows another feature. We can pass any DOM attribute by putting that as an item after the element id. It must be placed before the @ symbol, if you are using a particular event. In this code, we change the input in order to have a class in which we can pass the value of the class attribute and change the binding attribute of the cfdiv element.

<cfform id="myForm" format="html">
This is my edit box.<br />
<cfinput type="text" name="myText" class="test">
</cfform>
<hr />
And this is the bound div container.<br />
<cfdiv bind="{myText.class@keyup}.{myText}"></cfdiv>

Here is a list of the events that we can bind.

  • @click
  • @keyup
  • @mousedown
  • @none

The @none event is used for grids and trees, so that changes don't trigger bind events.

Extra Binding Notes

If you have an ID on your CFForm element, then you can refer to the form element based on the container form. The following example helps us to understand this better.

Bind = "url:bindsource.cfm?myEdit={myForm:myText}"

The ColdFusion 8 documents give the following guides in order to specify the binding expressions.

  1. cfc: componentPath.functionName (parameters)
  2. The component path cannot use a mapping. The componentPath value must be a dot-delimited path from the web root or the directory that contains the page.

  3. javascript: functionName (parameters)
  4. url: URL?parameters
  5. ULR?parameters
  6. A string containing one or more instances of {bind parmeter}, such as {firstname}.{lastname}@{domain}

The following table represents the supported formats based on attributes and tags:

Attribute

Tags

Supported Formats

Autosuggest

cfinput type="text"

1,2,3

Bind

cfdiv, cfinput, cftextarea

1,2,3,5

Bind

cfajaxproxy, cfgrid, cfselect cfsprydataset, cftreeitem

1,2,3

onChange

cfgrid

1,2,3

Source

cflayoutarea, cfpod, cfwindow

4

ColdFusion 8 Developer Tutorial An intense guide to creating professional ColdFusion web applications: get up to speed in ColdFusion and learn how to integrate with other web 2.0 technologies
Published: July 2008
eBook Price: ₨190.00
Book Price: ₨475.00
See more
Select your format and quantity:

Multiple Radio Buttons or Check Boxes and Multiple Select

We can also do binding of multiple radio buttons or check boxes. This is done by giving the same name attribute to the radio button collection or to the check box. We can use unique IDs to allow the use of the HTML <label></label> tags for extending the selection to the contents of for tags, based on the usage of the matching ID of the check boxes or radio buttons. In HTML, the use of a for tag would appear like the following, thus making the user interface better.

<label for='firstRadio'>
<input id='firstRadio' value='1' type='radio'>
</label>

When we have check boxes or multiple select, the results of the bind are treated like a list. If more than one item is selected, they are stored by separating them with commas similar to any other returning form data.

Spry Binding

Spry is an independent AJAX library that works with the browser DOM. Spry uses the same curly bracket type of parameters for binding. There are some differences in implementation though. Another thing that you can bind to your forms is the Spry data in what is called a Spry dataset. You would do that as shown in this example:

{spryDataset.dataField}

If we wish to bind deeper into a Spry dataset in more detail, we can use standard Spry dataset notation to refer to the data.

To include a literal brace character in a bind expression, excape the character with a backslash.

CFAJAXProxy

This is another very popular AJAX programming feature. This tag allows us to bind AJAX component changes to CFCs, JavaScript, and URLs without the requirement of an AJAX component to pass through it. It also allows us to interact with CFCs directly from JavaScript without binding to any other AJAX component. The JavaScript interface is created for us, and we can reuse the CFC as if it was present locally inside the browser JavaScript. It is very simple and acts as a good solution. Let's take a look at how it works.

CFAJAX Proxy Binding

We are going to build two text boxes that do arithmetic. The application only adds or subtracts. The first line of our code binds to the radio button set with the name calcType. We will bind to the click event. When either of the buttons is clicked, the call is made to the JavaScript function doCalc() passing the value of the radio button selected. Then the JavaScript function extracts the values of the two boxes and makes sure that they are floating-point numbers. If we didn't convert them, it would see them as text, and append the first text item to the second text item, or we would get some sort of error in subtraction. Then the results are stored and displayed with the alert function.

<cfajaxproxy bind="javascript:doCalc({calcType@click})">
<cfform id="myForm" format="html">
Enter Two Numbers.<br />
<cfinput type="text" name="number1" id="number1"><br />
<cfinput type="text" name="number2" id="number2"><br />
<label for="calcAdd">
<cfinput type="radio" value="add"
name="calcType" id="calcAdd">
Add</label><br />
<label for="calcSubtract">
<cfinput type="radio" value="subtract"
name="calcType" id="calcSubtract">
Subtract</label><br />
</cfform>
<script>
doCalc = function(thisCalc){
var myResult = 0;
var number1 = parseFloat(document.getElementById('number1').value);
var number2 = parseFloat(document.getElementById('number2').value);
switch(thisCalc){
case 'add':
myResult = number1 + number2;
break;
case 'subtract':
myResult = number1 - number2;
break;
}
alert(myResult);
}
</script>

This is what we would see if we entered '23' and '11' and had selected the subtract radio button:

ColdFusion AJAX Programming

We could have sent the results to either a CFC or URL as we did earlier. We do not need to have visible results in this example either, but it was just to show what was going on. We can see that one of the uses of CFAJAXProxy is to bind.

CFC Proxy Class Objects

Another use of CFAJAXProxy is to extend the remote methods of a CFC into the currently loaded AJAX page on the browser. This function is not binding, but rather an actual proxy. This means that we will extend the functionality of the remote methods right into the web page without writing extensive code. We will be converting our math webpage to support multiplication and division. We could do this easily in the browser. But we want to show the power of extending CFCs, so we will add these two functions in our CFC and work with them from there.

<cfajaxproxy bind="javascript:doCalc({calcType@click})">
<cfajaxproxy cfc="serverMath" jsclassname="remoteMath">

<cfform id="myForm" format="html">
Enter Two Numbers.<br />
<cfinput type="text" name="number1" id="number1"><br />
<cfinput type="text" name="number2" id="number2"><br />
<label for="calcAdd">
<cfinput type="radio" value="add"
name="calcType" id="calcAdd">
Add</label><br />
<label for="calcSubtract">
<cfinput type="radio" value="subtract"
name="calcType" id="calcSubtract">
Subtract</label><br />
<label for="calcMultiply">
<cfinput type="radio" value="multiply"
name="calcType" id="calcMultiply">
Multiply</label><br />
<label for="calcDivide">
<cfinput type="radio" value="divide"
name="calcType" id="calcDivide">
Divide</label><br />
</cfform>

<script>
jsMath = new remoteMath();

doCalc = function(thisCalc){
var myResult = 0;
var number1 = parseFloat(document.getElementById('number1').value);
var number2 = parseFloat(document.getElementById('number2').value);
switch(thisCalc){
case 'add':
myResult = number1 + number2;
break;
case 'subtract':
myResult = number1 - number2;
break;
case 'multiply':
myResult = jsMath.doMultiply(number1,number2);
break;
case 'divide':
myResult = jsMath.doDivide(number1,number2);
break;
}
alert(myResult);
}
</script>

The first modification to our code is to use the CFAJAXProxy tag in order to generate a proxy connection to the remote CFC component. We use an alias name of remoteMath for this component. This becomes a JavaScript class that helps in creating a local object that proxies between this page and our CFC. We then add two more radio buttons so that we have an interface for doing the multiplication function and the division function in our example. The next new line is where we create an object called jsMath in this example. This is not actually JavaScript math, but a JavaScript object that uses the remoteMath class to build an object for communicating with the CFC. Lastly, we check the value of the selected radio button. Then we use our jsMath object, and communicate with the remote server. The name of the remote method is the same as we use on our object and then we pass the argument parameters to the server. The return value is put in our myResult variable just as we did from JavaScript in add and subtract. If we use the same numbers and click Divide, the following result will be obtained. Here is the screenshot of the page in action and the CFC code.

ColdFusion AJAX Programming

<cfcomponent output="false">
<cffunction name="doDivide" access="remote">
<cfargument name="number1">
<cfargument name="number2">
<cfreturn arguments.number1 / arguments.number2>
</cffunction>
<cffunction name="doMultiply" access="remote">
<cfargument name="number1">
<cfargument name="number2">
<cfreturn arguments.number1 * arguments.number2>
</cffunction>
</cfcomponent>

Now in a real-world application, we might be looking for some data or updating a database if we were doing this type of proxy function interaction. The point is that all the coupling and AJAXing is done with little code. It is truly a remarkable work as the Adobe engineers have worked hard for this connectivity. This is how ColdFusion has become better than ever before!

One thing that we have not yet dealt with is the callback functions. There are two standard types of callback object methods in remote CFC proxy classes, the setCallbackHandler() method and the setErrorHandler() method. We are going to modify our code so that the results are automatically sent to these handlers with our CFC interaction. Here is the final code for our examples.

<cfajaxproxy bind="javascript:doCalc({calcType@click})">
<cfajaxproxy cfc="serverMath" jsclassname="remoteMath">
<cfform id="myForm" format="html">
Enter Two Numbers.<br />
<cfinput type="text" name="number1" id="number1"><br />
<cfinput type="text" name="number2" id="number2"><br />
<label for="calcAdd">
<cfinput type="radio" value="add"
name="calcType" id="calcAdd">
Add</label><br />
<label for="calcSubtract">
<cfinput type="radio" value="subtract"
name="calcType" id="calcSubtract">
Subtract</label><br />
<label for="calcMultiply">
<cfinput type="radio" value="multiply"
name="calcType" id="calcMultiply">
Multiply</label><br />
<label for="calcDivide">
<cfinput type="radio" value="divide"
name="calcType" id="calcDivide">
Divide</label><br />
</cfform>
<script>
jsMath = new remoteMath();
doCalc = function(thisCalc){
var number1 = parseFloat(document.getElementById('number1').value);
var number2 = parseFloat(document.getElementById('number2').value);
jsMath.setCallbackHandler(showResult);
jsMath.setErrorHandler(showError);

switch(thisCalc){
case 'add':
showResult(number1 + number2);
break;
case 'subtract':
showResult(number1 - number2);
break;
case 'multiply':
jsMath.doMultiply(number1,number2);
break;
case 'divide':
jsMath.doDivide(number1,number2);
break;
}
}
showResult = function(result){
alert(result);
}
showError = function(statusCode,statusMsg){
alert("status: "+statusCode+"n"+statusMsg);
}
</script>

We set the callback handers inside our doCalc() function for the jsMath object. These methods are default names in the ColdFusion AJAX plumbing. It should be noted that we do not want to create remote methods with these names in our CFCs. We removed the variable that we were using and have now created another function called showResult() for handling the addition and subtraction. Now, let us look at the multiply case statement block and the divide case statement block for our code. There is no evidence as to how the output from these calls is being handled. This is why we have declared the setCallbackHandler() and setErrorHandler() methods. In those methods, we put the name of the callback handler functions without their parents. This is a standard way to handle the referencing of a callback handler in JavaScript. We can see that the standard parameters are passed to the error handler. Run the modified code and pass in a zero for the bottom number, and this is what you will see. We could produce much more elaborate code for handling the error. We could pass structured code back to the success method, and do much more there also. We kept this example as simple as possible to help us understand the power and features of how ColdFusion AJAX programming works for both binding and proxy functions.

ColdFusion AJAX Programming

This handles all the data type conversions between ColdFusion and browser JavaScript variables and structure.

This makes ColdFusion the easiest and fastest application for doing AJAX. Also, this platform provides a high level of power and ease to developers.

Client Debugging

There are a number of tools that can make AJAX programming more effective. We will look at Firebug and the built-in debugger that is a part of ColdFusion.

Firebug

One of the best tools available for AJAX development is Firebug. This tool is a plug-in for Firefox with many abilities. The one we will look at specifically here is the ability to drill down into the DOM structure of a browser page. We are going to look at how this tool works. First, we will have a look at the previous example and take the radio button for our divide selection. Here is a screenshot of the page in which we run firebug. Refer to http://www.getfirebug.com/ for the features of this plug-in.

ColdFusion AJAX Programming

We see the Inspect menu item at the top. If we click on it, then we will be able to click on the radio button besides the Divide text. This in turn will give us the following in our console view.

ColdFusion AJAX Programming

If we then go to the right pane of firebug and click on the DOM item, we will get the structure details of the object. There are several types of objects that are explained in detail in ColdFusion and this gets loaded with AJAX pages. These can be entered by clicking on the Console tab present in the left panel. Then as you can see, you have an entry line at the bottom where you can enter any DOM object name or any JavaScript function, and it will allow us to see what is available with that item. If you're going to dive deeper into AJAX, these are the tools to make the journey much simpler. If you don't have a library loaded that supports it, you can still use the common DOM element shortcut. This means that for the radio button above with the id calcDivide, we could use the full DOM of document.getElementById (calcDivide) or we can use the shortcut version $ ('calcDivide'), and press Enter.

ColdFusion AJAX Programming

Now, we don't see the item within the context of the HTML page. We just see the item we have requested. If we were calling an existing JavaScript structure or a simple value, we would see that too. With a similar item, we can click on it, and then have a look at the DOM model for that particular item as we did earlier. The additional items that the ColdFusion AJAX includes are listed here. We would just enter them in the prompt line as we did for the radio button ID.

  • ColdFusion.Layout.getBorderLayout (name)
  • ColdFusion.Grid.getGridObject (name)
  • ColdFusion.Layout.getTabLayout (name)
  • ColdFusion.Tree.getTreeObject (name)
  • ColdFusion.Window.getWindowObject (name)

To get more information about these topics, you can look at the ColdFusion documents that consist of EXT and YUI library files. The name of course is the same as you assigned while creating the item. Also, we need to remember that JavaScript is case sensitive.

Built-In Debugging

This is a very useful feature. All you have to do is to change the URL in the address bar to get this working. Now, if you are running ColdFusion on a live site, this feature should be shut off in the ColdFusion Administrator. Here is the URL with and without debugging. The only difference is we have added an extra variable to the URL. Just add it to the last variable after the question mark in the URL.

http://localhost/cfb/code/chapter_10/bind_7.cfm
http://localhost/cfb/code/chapter_10/bind_7.cfm?cfdebug

Here is the screenshot of the debugging window.

ColdFusion AJAX Programming

We can see that there are a number of features to this debugging window. We can Collapse the window to get it out of the way. It can also be dragged around the screen to move it out of the way, if collapsing is not enough. It is dragged by holding the mouse button down over the dark grey area where the title is. We can toggle to obtain information on the type of debugging. This will also toggle the information that is already present. When we have more information, it will create a scroll bar so as to move through the log. The pause and clear buttons are great features.

Logging Features

Not only is debugging built in, but the system is designed to allow us to send logging to the window so that it becomes easier. Let's open our Firebug console and log the element we were looking at earlier. There are a number of logging features, and it is a better way for managing our build or debugging interaction with the logger.

ColdFusion AJAX Programming

Here, we observe that we do not get as many details as we used to get in the DOM panel of the Firebug console. Remember that the $() shortcut is a part of Firebug. Normally, you either need to have that in another AJAX library, or you have to use the old method that we mentioned earlier. Here are the types of log functions that are included with the debugger.

  • ColdFusion.Log.dump
  • ColdFusion.Log.debug
  • ColdFusion.Log.error
  • ColdFusion.Log.info

The ColdFusion.Log.dump has a special function whereas the remaining three only change the tag that is before the log item. One thing that can be done is to design custom tags and CFCs, so that they have a 'test' mode that can be run. This would allow them to interact with the debugging tools and make a more sustainable product. This would mean there would be more quality assurance for all our software.

Customization

When it comes to coding, there are many things that can be done. This is a two-fold scenario. The primary way to customize is more on design than on coding. If we are inclined, we can actually go as far as replacing all the code of core AJAX functions. Generally, before going that far, it might be a better idea to look at individual libraries and see if there is something present already that can help us achieve our goals.

We are going to look at another tag in ColdFusion 8 known as <CFAjaxImport/>. Most of the look-and-feel of the AJAX tags is controlled by CSS files. Using this tag, we can substitute custom styles for these tags. This will be coded as in the given example. The cssSrc attribute specifies the URL, relative to the web root of the directory that contains the CSS files used by ColdFusion AJAX features, with the exception of the rich text editor. This directory must have the same directory structure, and contain the same CSS files, and image files required by the CSS files, as the web_root/CFIDE/scripts/ajax/resources directory

<cfAjaxImport cssSrc="/mySite/myCSS/">

We can also change the scriptSrc attribute. Similar to CSS styles, you need to include structure of the same scripts as found in the /cfide/scripts/ directory. This is where hackers can extend the core power that ships in ColdFusion. If you use this attribute, you will not be able to use it more than once in a request.

Another important thing about this tag is the ability to declare the AJAX tags that need modification. As developers, we often forget, as we think about code, the challenge of designing a site to the owner's satisfaction. We are often negligent in this aspect. The following table shows the tags that can be put in the tag attribute list to set what is modified by the cfAjaxImport tag.

Tag Attribute Value

Used For

cfdiv

cfdiv tags

cfform

Forms that are in cfpod, cfwindow, or cflayoutarea tag bodies

cfgrid

AJAX format cfgrid tags

cfinput-autosuggest

cfinput tags that use the autosuggest attribute

cfinput-datefield

HTML format cfinput tags that use the datefield attribute

cflayout-border

cflayout tags with a type attribute value of border

cflayout-tab

cflayout tags with a type attribute value of tab

cfmenu

cfmenu tags

cfpod

cfpod tags

cfsprydataset-JSON

cfsprydataset tags that generate Spry JSON data sets

cfsprydataset-XML

cfsprydataset tags that generate Spry XML data sets

cftextarea

HTML format cftextarea tags

cftooltip

cftooltip tags

cftree

HTML format cftree tags

cfwindow

cfwindow tags

ColdFusion 8 Developer Tutorial An intense guide to creating professional ColdFusion web applications: get up to speed in ColdFusion and learn how to integrate with other web 2.0 technologies
Published: July 2008
eBook Price: ₨190.00
Book Price: ₨475.00
See more
Select your format and quantity:

Automatically Wired AJAX Links

This function allows you to connect the links inside a cfdiv, cflayoutarea, cfpod, or cfwindow control to the containing control. This code would load the local file as the content of the container. It will not load a file from a remote site to protect it from cross-site script attacks.

<cfdiv height="600" width="600" name="ajaxDiv">
<cfoutput>
<a href="#AjaxLink('LinkOne.cfm')#">Link One</a>
<br />
<a href="#AjaxLink('LinkTwo.cfm')#">Link Two</a>
</cfoutput>
</cfdiv>

Execute JavaScript after Loading Content

There are two times when content is loaded. First, when the page is loaded and then when the content within a section such as a cfdiv, cflayoutarea, cfpod, or cfwindow is loaded. You want the browser DOM to be created before any JavaScript is called. This function helps in ensuring that the code isn't run prematurely. Here is an example of how to run the command when the whole page is loaded

<html>
<head>
<title>Enter Mail Login Details</title>
<script>
init = function() {
ColdFusion.Window.show('loginwindow');
}
</script>
</head>
<body>
<cfwindow name="loginwindow" title="Enter Login Details"
draggable="false" closable="false" resizable="false"
width="450" height="200">
<cfoutput>
<form action="#cgi.script_name#" method="post" name="loginform">
<table width="400" class="loginTable" cellpadding="5">
<tr>
<td>username:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>password:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="login" value="Login"></td>
</tr>
</table>
</form>
</cfoutput>
</cfwindow>
<cfoutput>
<form action="#cgi.script_name#" method="post" name="changePasswordForm">
<table width="400">
<tr>
<td>old password:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>new password:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="login" value="Login"></td>
</tr>
</table>
</form>
</cfoutput>
<cfset AjaxOnLoad("init")>
</body>
</html>

This example is a little longer than our previous examples. But it makes sure that the user is logged in before he or she attempts to change a password. It's not a complete example but is intended to explain in a real-world application how to use the tag for illustration purposes. There are missing pieces. So DO NOT use it as it is!

Other Cool Commands

There are three JSON functions built into ColdFusion. Most of the time, you will find this is used in CF8 AJAX, where it is handled automatically. Yet, if you are working with Yahoo data or sending something to jQuery, then you might require the ability to work with JSON data along with built-in functions. You can dump the results with CFDump on the server side, and with the debugging dump function.

  • JSONencrypt() converts to JavaScript object notation
  • JSONdecrypt() converts from JavaScript object notation
  • isJSON() checks to see if a variable's content is in a valid JSON format

Spry is an AJAX library created by ADOBE. It does many amazing things. The first time I came across the curly bracket data alias style of coding that we use in ColdFusion AJAX was in Spry. Shortly thereafter, I also found similar practice in ActionScript coding. This may not have been the first time it came to my attention. If we are going to work with Spry AJAX pages, then we need to convert data to Spry-based data for in-browser usage. The ins and outs of Spry could end up being as much text as we have on CFAJAX, if not more.

  • CFSpryDataset()

Post for CFAJAX Calls

We will complete this article with a tip on how to send data to the browser via Post, instead of sending it via standard URL variables. We can send more data through a Post than we can though URL style variables.

<html>
<head>
<script type="text/javascript">
function cfcViaPost()
{
Var pickyObject = new pickyCFC();
pickyObject.setHTTPMethod("POST");
pickyObject.doSomething();
}
</script>

</head>
<body>
<cfajaxproxy cfc="pickyCFC">
<cfinput type="button" name="test" onclick="cfcViaPost();">
</body>
</html>

Summary

It seems to me like there were so many subjects it was hard to tell where to stop. With that said you should think there is still plenty of content that isn't contained in this article. We have covered the following:

  • Binding between object data and container objects
  • Binding between CFCs and container objects
  • Binding between URLs and container objects
  • Binding between JavaScript and container objects
  • How to make binding objects event sensitive
  • Binding on multi-item objects like radio buttons, check boxes or multi-select boxes
  • CFAJAXproxy for binding objects to JavaScript functions
  • CFAJAXproxy to extend connectivity of CFCs to JavaScript class objects
  • Success and Exception Handling on CFC proxy class objects execution
  • Client Debugging with Firefox and Firebug
  • Client Debugging with CFDebug in the browser
  • Logging to the Client debugger
  • Customization for AJAX component CFCs and Scripting
  • Auto-wired AJAX Links
  • OnLoad JavaScript function triggering
  • Overview of JSON features
  • Sending CFC targeted data via form Post versus URL type data
	

About the Author :


John Farrar

John started working with computer programming around 1977. He has had the opportunity to work on projects used by Apple, Blue Cross, Brunswick Recreation, Casio, GVSU, Johnson Controls, Sprint, and many others. This history covers over 30 years of knowledge and experience in the industry.

He started doing web development over 10 years ago. In the early days of the Web ColdFusion stood out to him not just as a way to make web pages into web applications but as a maturing solid platform good for the developer, site owner, and end users. He started at version 4.5 and has been enjoying each version upgrade more and more.

John owns a company called SOSensible. His company does work for large companies but has a special focus on also making sure technology is approachable beyond the enterprise. They have developed a number of Open Source solutions including COOP. COOP is a mix of Custom Tags and CFCs that provides structure while keeping development simpler. It demonstrates his love for the things that make ColdFusion/CFML a delightful language to build websites.

He has spoken at national and regional conferences, online meetings, and area user group meetings. He is also an Adobe User Group manager. John knows that community is a viable and productive tool to build developers and the companies they serve. He has learned much from great resources in the community including bloggers, books, conferences, and resources to great in number to mention here. He blogs at sosensible.com for the community.

Contact John Farrar

Books From Packt

  PHP and script.aculo.us Web 2.0 Application Interfaces
PHP and script.aculo.us Web 2.0 Application Interfaces

WordPress Plugin Development: Beginner's Guide
WordPress Plugin Development: Beginner's Guide

Drupal 6 JavaScript and jQuery
Drupal 6 JavaScript and jQuery

Seam 2.x Web Development
Seam 2.x Web Development

Grails 1.1 Web Application Development
Grails 1.1 Web Application Development

JBoss Tools 3 Developers Guide
JBoss Tools 3 Developers Guide

Django 1.0 Website Development
Django 1.0 Website Development

Learning jQuery 1.3
Learning jQuery 1.3

 

 

 

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software