CF AJAX Programming

November 23, 2009

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> </td>

							<td><input type=”submit” name=”login” value=”Login”></td>

						</tr>

					</table>

				</form>

			</cfoutput>

		</cfwindow>

		<cfoutput>

			<form action=”#cgi.script_name#” method=”post” name=”changePasswor

				dForm”>

				<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> </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 Sprybased
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 chapter 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 chapter. We have covered the following: