Quickstart ColdFusion+jQuery Ajax

This quickstart guide demonstrates just how quickly and easily you can use the jQuery library with ColdFusion. (CFMX7)

The example seen above, uses the following:

jquery.js: used for initiating and processing the Ajax request, and for displaying the fade effects.
a .cfm processor file: for invoking the ColdFusion component.
a .cfc file: for a simple database query.
an mdb file: an access database.
cfjson.cfc: for JSON encoding

How it works

A change event from a simple html form executes a jQuery function: $.ajax(). This triggers a POST type request to a server-side processing page: request_processor.cfm.

<script language="JavaScript" src="http://www.365labs.net/cf_jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function(){ 
 	$('#contentdiv').html('&& nbsp;');
	$("#idm").change( function() {
	var formval = { idm:$(this) .val()};
	$.ajax({
	  type: "POST",
	  url: "request_processor.cfm",
	  dataType: "json",
	  data: formval,
	  success: function(response){
	  $('#contentdiv').fadeIn(2000).append(response.MAIN_DISH);
			}
		});		
	});			
 });
</script>
<style type="text/css">
  body {font-family: Arial, Helvetica, sans-serif;}
  #databox { border: 1px solid Gray; 
	         margin:30px auto 0px auto;
	         padding: 10px; 
	         width: 200px;}
	#contentdiv { color:red; font-size: 30px;  margin-top: 10px;}
</style>
 
<div align="center" id="databox">
	<select id="idm">
		<option value="0" SELECTED>What's for Dinner?...</option>
		<option value="1">Monday</option>
		<option value="2">Tuesday</option>
		<option value="3">Wednesday</option>
		<option value="4">Thursday</option>
		<option value="5">Friday</option>
		<option value="6">Saturday</option>
	</select>
	<p id="contentdiv"> </p>
</div>

request_processor.cfm simply invokes menudata.cfc containing a database query (see below). The returned structure is encoded into JSON using cfjson.cfc, then sent back to the client-side requesting page for display.

<cfset odata = createObject("component","menudata")>
<cfset thedata = odata.getMenuData(FORM.idm)>
<cfset ojson = createObject("component","cfjson")>
<cfset theresults = ojson.encode(thedata)>
<cfoutput>#theresults#</cfoutput>

menudata.cfc contains the following:

<cfcomponent displayname="menudata">
	<cffunction name="getMenuData">
		<cfargument name="menu_id" required="yes">
		<cfquery name="get_menu" datasource="menudb">
			SELECT	menu.day,
					menu.main_dish
			FROM	menu
			WHERE	menu.qsid = #ARGUMENTS.menu_id#
		</cfquery>
		<cfset pstruct = structNew()>
		<cfset pstruct.day = get_menu.day>
		<cfset pstruct.main_dish = get_menu.main_dish>
		<cfreturn pstruct>
	</cffunction>
</cfcomponent>

Hungry for more ColdFusion+jQuery Ajax?...

The example above, is simply to provide you the basic concepts of implementing ColdFusion+jQuery Ajax.
However, you can further optimize your implementation by using jQuery's $.get() or $.post(), or by using Rob Gonda's latest update on ajaxCFC. Rob's latest/upcoming update includes significant enhancements to support jQuery.

ColdFusion Developers: The jQuery Community Welcomes You!

In behalf of John Resig and the talented team behind the jQuery library, welcome!
Like the CF community, the jQuery community is made-up of many dedicated and loyal fans eager to help anyone who is new to jQuery. It is an active community that includes a growing number of ColdFusion notables.

this guide was prepared by: Michael E. Carluen on 01/08/2007 (email: mecarluen at 365labs dot com)

Quickstart Guide to ColdFusion+jQuery Ajax