CFAjaxProxy and CFSaveContent

I’ve been using ajax in my coding for a good number of years now. Back in 2005, I was using CFAjax to do all the heavy lifting for me. That was before ColdFusion 8 and the wonderful CFAjaxProxy tag. Life was good before–now it is even better. I’m not going to talk about CFAjaxProxy specifically, there are lots of other great blogs about it.

Back in the day when using CFAjax, I was creating the return values for anything to pass back to the browser using JavaScript. This was very tedious and time consuming. Then I got to thinking, why not simply build my return in the function that I am calling and encapsulate it all in the CFSaveContent tag, then pass that back as a string? Voila!

Whole table layouts can be easily constructed in the function and any query to populate the values can be run. Then utilizing the equally wonderful JQuery, the display can be populated with a simple line of code.

Below is some simple code to show how this works. The beauty is that the code in the getResults function can be as complex as you want it to be, but the return values will still be the string that is populated back to the page.

Something that I have done, is to actually pass back a structure that contains multiple “cfsavecontent” variables.

One thing to be aware of is that if you are wanting to have JavaScript functions working on the new content that you are creating, then you have to add that JavaScript code to the HMTL code that you are creating.

Enjoy!

cfAjaxExample.cfc

<cfcomponent output="false">
	<cffunction name="getResults" access="remote" output="false" returntype="string" hint="Get the results and pass back as a table">
		<cfargument name="companyID" default="" required="true" type="numeric" />
		<cfset var returnString = "" />
		<cfscript>
			getIndividuals = getIndividuals(companyID = arguments.companyID);
		</cfscript>
		<cfoutput>
			<cfsaveContent variable="returnString">
				<table class="results">
					<thead>
						<tr>
							<th>First Name</th>
							<th>Last Name</th>
							<th>Email</th>
							<th>Phone</th>
						</tr>
					</thead>
					<tbody>
						<cfloop query="getIndividuals">
							<tr>
								<td>#first_name#</td>
								<td>#last_name#</td>
								<td>#email#</td>
								<td>#work_phone#</td>
							</tr>
						</cfloop>
					</tbody>
				</table>
			</cfsaveContent>
		</cfoutput>

		<cfreturn returnString />
	</cffunction>

	<cffunction name="getIndividuals" access="package" output="false" returntype="query" hint="Get a listing of individuals for a specific company">
		<cfargument name="companyID" default="" required="true" type="numeric" />
		<cfset var returnQuery = "" />

		<cfquery datasource="#request.datasource#" name="returnQuery">
			SELECT
				first_name,
				last_name,
				email,
				work_phone
			FROM
				name
			WHERE
				co_id = <cfqueryparam cfsqltype="cf_sql_integer" value="#arguments.companyID#" />
		</cfquery>

		<cfreturn returnQuery />
	</cffunction>
</cfcomponent>

cfajaxProxy.cfm


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script type="text/javascript" src="cfAjaxProxy.js"></script>
<div>
<h2>Ajax Example</h2>

 Select Company
 Apple
 Google
 Microsoft

<div id="displayIndividuals"></div>
</div>

cfAjaxProxy.js

var myBlogExample = new blogExample();

$(document).ready(function(){
	$("#company").change(function(){
		var companyID = $('#company').val();
		returnIndividuals = myBlogExample.getResults(companyID = companyID);
		$("#displayIndividuals").html(returnIndividuals);
	});
});

Have you found a good trick using cfsavecontent? Let us know!

Categories: CMS, E-Commerce, Integration and Mobile Apps | Tags: | Bookmark the permalink.
James Wood

About James Wood

James is a programmer here at Matrix Group. He is affectionately known around the office as S.P.A.R.T.A.C.U.S. because he is an avid marathon runner. He is also a beer connoisseur. A little known fact about James is that he was a toxicologist before switching professions for a change of pace. His flexibility will prove to be a valuable quality, because he has a beautiful daughter who’s just headed into her tween years.