Simple jQuery/ColdFusion data loading example

This post is more than 2 years old.

A reader, Andy, was looking for a very simple example of how jQuery can be used to load data from ColdFusion. I've done this many times before, but he wanted the bare bones, simplest demo I could muster. I covered this before, but I thought I'd share the code in case others were looking for simple examples as well.

I'll begin with the initial template - the one that will use jQuery. It's going to have a grand total of one button and clicking that will fire off our request to ColdFusion.

<html>

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {

	//I handle supporting the click on the button
	$("#testButton").click(function() {
		//I'm going to make the slow request, but first, tell the user
		$("#status").html("Please stand by. I'm doing important stuff.")
		//Now disable the button cuz I'm working
		$(this).attr("disabled", true)
		//Fire it off!
		$.get("test2.cfm", {},  function(data,status) {
			//This portion is run when all done
			//First clear the status
			$("#status").html("")
			//Set the response
			$("#result").html(data)
			//Re-enable the button
			$("#testButton").removeAttr("disabled")
		})
	})

})
</script>
</head>

<h2>Testing a slow AJAX process</h2>

<p>
Click the button below to start the process. It will call a remote service that will take about 5 seconds to run.
</p>

<input type="button" id="testButton" value="Click me!">

<!--- This is the div we use to let the user know what's going on. --->
<div id="status"></div>

<!--- This is the div for the result. --->
<div id="result"></div>

Let's start at the bottom. Notice I've got two divs. One is going to be used as a status area. It will be used by jQuery to let the user know something is going on. (Ajax is not the same as instantaneous.) Moving up, I've got one main block of code all within $(document).ready. This is shorthand in jQuery for "Do this when the page is done." Within it is one core function - an event handler for my button. When clicking we will first update the status div with a loading message and then disable the button. (Sometimes you have to do that or your users may go click crazy.) Next we actually fire off the Ajax request with the $.get command. test2.cfm is where my ColdFusion logic is (and I'll share that code next), but in this example we aren't doing much with it. I don't grab any form data to pass to the script. I simply run it. I've then set up a response function to run. It first clears the status message, then sets the result into my div, and finally re-enables the button.

test2.cfm doesn't do much at all. I simply made it a bit slow so that the loading message would be nice and obvious:

<cfset sleep(3000)>
<cfoutput>Hello world, #timeFormat(now(), "long")#</cfoutput>

Not terribly much to it, but I thought it might be useful for folks who wanted a quick demo of how easy it is do Ajax with jQuery and ColdFusion. I've attached a zip of the two files to this blog entry and you can run the demo yourself.

Download attached file.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Dave posted on 5/2/2010 at 7:30 AM

can this be used 'instead" of cfajaxproxy ?

Comment 2 by Ben Riordan posted on 5/2/2010 at 8:17 AM

Thanks for that post - great for digging a bit further into jQuery.

I've used jQuery a lot for the front end, to load in parts of the page that are already processed / static, but not to pull in live data like you have done here. I've mostly used things like CFDIV for that.

So, I'm curious... do you (or anyone else who wants to chime in) still use many of the built in AJAX tags with ColdFusion or do you pretty much solely use jQuery? If so, what?

Since it looks like a majority of ColdFusion users prefer jQuery over the included Ext-JS library, is it possible that Ext-JS might eventually be replace by jQuery in future releases?

One problem I see with my own applications is if I use jQuery and then I want to include CFGRID or something like that the browser is then forced to load *both* the jQuery and Ext-JS libraries - quite a sizable load for a higher traffic / production website. I would probably use something like flexigrid (http://flexigrid.info) instead of CFGRID if I wanted to load a grid when the jQuery library is already loaded. Or, alternatively use CFGRID and try to only use the built in ColdFusion Ajax Functions so that only one javascript library has to be loaded by the end user.

I guess that isn't exactly a question per say, but just curious on everyone's view on that and how people go about using the two options.

Comment 3 by David Hammond posted on 5/2/2010 at 6:27 PM

This is a good example. It can actually be made a tiny bit simpler by using the load function instead of get:

$("#result").load("test2.cfm", function() {
//This portion is run when all done
//First clear the status
$("#status").html("")
//Re-enable the button
$("#testButton").removeAttr("disabled")
})

http://api.jquery.com/load/

Comment 4 by Raymond Camden posted on 5/2/2010 at 7:16 PM

@Dave: Sure.

@Ben: I personally do not use much of the pre-built Ajax stuff. I have a lot of respect for it. The binding stuff is super easy and frankly, even easier in jQuery in some respects. When I was still a bit uncomfortable w/ Ajax stuff, I found the CF8 stuff to be remarkably easy and powerful. But now that I am more experienced, I stick to jQuery for the most part. And I think that's exactly what Adobe wanted. Not every feature will be appropriate for every developer.

Does that make sense?

@David: Yep - jQuery is soooo like CF in that way - many ways to skin the cat.

Comment 5 by Raymond Camden posted on 5/2/2010 at 7:17 PM

@Ben: One thing I forgot to say - a very good grid for jQuery is jqGrid. I've used it in the past and it's very powerful.

Comment 6 by Ben Riordan posted on 5/2/2010 at 8:18 PM

@Ray Yes, that makes sense. Thanks for you comments.

Comment 7 by Phillip Senn posted on 5/2/2010 at 9:58 PM

I knew that I wanted a program that trapped errors, so I focused on the $.ajax function.
I also knew that I wanted to use JSON because it looked like JSON had a smaller footprint than XML.
I knew that I wanted to use cfcs with access="remote".
I wanted to play around with various data types: text input, checkbox, date.
I knew that I wanted to use jQuery-UI becaue of it's theme garden.
So I found a plug-in that used jQuery-UI for layout (Header, content, sidebar(s), footer).

That's why I started a folder called "jQueryZenGarden", which at the moment kind of looks like a junkyard, but if you look at subfolder 005, you'll find a really sweet example using all of the above.

http://www.cfmzengarden.com...

Comment 8 by Murray Hopkins posted on 5/3/2010 at 4:44 AM

@Ben: For my db driven web apps I am increasingly using the Ext library for the entire front end and CF for the server side. This also has the advantage that I can use most of what I build for both browser based interfaces and for AIR ie the Ext code base I am developing over time can be used for both approaches.

Comment 9 by Micah Brown posted on 5/3/2010 at 5:25 PM

Thanks for the mini-tutorial. What is the best way to make this work properly in IE..you know everyones favorite browser? (minimal finger wagging please)

Comment 10 by Raymond Camden posted on 5/3/2010 at 5:34 PM

It doesn't work in IE??

Comment 11 by Micah Brown posted on 5/3/2010 at 5:35 PM

Well crap it wasn't and now it suddenly is. Im extra slow this morning. Nevermind!

Comment 12 by Raymond Camden posted on 5/3/2010 at 5:35 PM

Just tested IE8 - worked fine.

Comment 13 by Mike Hodgson posted on 5/6/2010 at 12:29 AM

@Phillip Your example is much more elaborate than mine, but I also used a CFC with access="remote" to drive my URL shortening service http://surly.ca/ . The rest of the site is entirely JQuery/HTML/CSS

I'll probably post the complete code on GitHub, once I get it cleaned up a bit!

Comment 14 by Phillip Senn posted on 5/6/2010 at 12:51 AM

Thanks for the comment Mike!
Although my example might be considered elaborate, its purpose is to show how to do typical CRUD.
I make my examples public for three (3) reasons: 1) To learn how to do it myself. 2) To provide the syntax for others. 3) To show how much I don't know (ie: where I need help).

Comment 15 by Shaun posted on 5/7/2010 at 1:15 AM

FYI, it wasn't working for me in IE7, until I turned off the CF Debugging... then it worked fine.

Comment 16 by Raymond Camden posted on 5/7/2010 at 9:42 PM

Ah, always a good idea. :)