ColdFusion + jQuery example

This post is more than 2 years old.

As my last act before heading out for vacation (ok, I lie, you know I'm going to blog again, at least 5-6 times), here is an incredibly simple jQuery example involving ColdFusion on the back end. This is not new. But I had a reader write in looking for a very specific example, and I couldn't find a simple blog entry of mine to meet his needs. Basically:

  1. Click a button
  2. Tell the user the slow process is begun
  3. Fire off an Ajax request to the server
  4. Show the response

I've done this in most all of my Ajax demos, but a quick little example couldn't hurt. Here is the front end.

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

	$("#buttonTest").click(function() {
		//cache the status div
		var status = $("#status");
		
		//First, do a statuc message
		status.html("<i>Loading awesome. Please stand by.</i>");
		
		//Now hit our slow process...
		$.get("slow.cfm", {}, function(res,code) {
			//Assume the result is basic HTML, so just show it
			status.html(res);
		});

	});

});
</script>
</head>

<body>

<input type="button" id="buttonTest" value="Push for Love">

<div id="status"></div>

The logic is rather simple. On clicking a button, update a div to tell the user what is going on, then fire off the XHR request. Normally I'd hit a CFC and work with complex results, but in this case we are assuming a nicely formatted result that can be dumped into the div.

Our server side code....

<cfset sleep(2000)>

<cfoutput>Hello from awesome. #randRange(1,100)#</cfoutput>

The sleep command there is simply to help simulate a slow process.

And that's it. Sorry if this bores folks, but even when I do super simple examples for readers, I've got to turn it into a blog entry. :)

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 Rich Hefter posted on 12/22/2011 at 4:05 AM

Just curious. I tried hitting the button twice, but the script was on fired the first time.

Comment 2 by Rich Hefter posted on 12/22/2011 at 4:08 AM

..Sorry, It was only an issue in Internet Explorer 8. OK in other browswers.

Comment 3 by Phillip Senn posted on 12/22/2011 at 4:47 AM

Here was a good post from Dan G. Switzer:
http://blog.pengoworks.com/...

And here's an example I did a while back with error trapping:
http://www.phillipsenn.com/...
It has source code at the bottom and a link to a copy of the cfc.
Lots of little tricks I've picked up from you, including adding <cfparam name="url.returnformat" default="json">
and queryFormat=column.

Comment 4 by Raymond Camden posted on 12/22/2011 at 7:06 PM

Rich - one more thing I could do is disable the button while the operation is running. That way it won't fire off multiple times at once if you click quickly.

Comment 5 by Rich Hefter posted on 12/22/2011 at 7:33 PM

Hi Ray. FYI. When I said I hit the button twice, I meant the 2nd time was after the response was received. In IE8, this was an issue.

Comment 6 by Raymond Camden posted on 12/22/2011 at 7:34 PM

That is truly odd. I can see of no reason why IE8 would fail in such a simple demo. Of course, I can't test this since I have IE9. If you can figure out the exact reason, I'd appreciate it.

Comment 7 by Chris Grzebyk posted on 12/22/2011 at 10:17 PM

Hey Ray,
If you don't know (unless you are a compatibility mode hater), just hit f12 and select compatibility mode for ie8. I would say it's about 99.975% correct. Cheers/Merry Xmas and I appreciate all of your blogs.
-Chris

Comment 8 by Raymond Camden posted on 12/22/2011 at 10:19 PM

Holy crap - you aren't kidding. It does break. But why?? Time to dig.

Comment 9 by Raymond Camden posted on 12/22/2011 at 10:20 PM

Ohhhhhh I got it - I see the network call is running N times (thanks IE for adding that), but it is a caching issue.

Comment 10 by Raymond Camden posted on 12/22/2011 at 10:28 PM

Any IE users having issues can run:

http://www.raymondcamden.co...

The only change was this:

$.ajaxSetup ({
// Disable caching of ANY AJAX responses.
cache: false
});

Kinda ridiculous how easy that is in jQuery.

Comment 11 by Phillip Senn posted on 12/22/2011 at 10:49 PM

I think I need to update my example to show the new deferred .done and .fail hotness. One problem with some of this stuff is there are multiple "right" ways to do things. But I think .done and .fail are to be used instead of anonymous functions in the callback parameters.

Comment 12 by Raymond Camden posted on 12/22/2011 at 10:50 PM

Not sure I'd argue that would be 'better' in this example (of course, better is very much a point of view). Not sure it makes sense in such a simple use case of, "click, get crap", type operations.

Comment 13 by Raymond Camden posted on 12/22/2011 at 10:51 PM

That being said - I'm still trying to wrap my brain around them - so I'd welcome seeing your change.

Comment 14 by Phillip Senn posted on 12/22/2011 at 11:37 PM

OK, I've updated it. Even though it's working, I'm still not sure if this is "the right" way to use .done and .fail because it just looks like I'm substituting words for .success and .error.

There's a good Google doc here: https://docs.google.com/pre...

It was in response to my StackOverflow question here:
http://stackoverflow.com/qu...

Comment 15 by Raymond Camden posted on 12/23/2011 at 10:03 PM

Quick note - you had quite a few typos for function - you spelled it as funciton. I do that a _lot_. This is a nice little preso... and it helps a bit (I mean helps me a bit). By any chance could you also make real file examples of that for folks to download and run?

Comment 16 by Raymond Camden posted on 12/23/2011 at 10:03 PM

And to be clear - me asking for files is being lazy. I get that. ;)

Comment 17 by Phillip Senn posted on 12/24/2011 at 12:10 AM

The Google doc was from someone else.
He lost me about 3/4 of the way through.

Comment 18 by KANTH posted on 1/27/2012 at 8:06 PM

hi Ray, i am trying to implement News slider starting with a static one initially so when I am trying it using the Coda slider.i think I am getting preload error because it shows me loading and a broken pic. please help me out.

Comment 19 by Raymond Camden posted on 1/28/2012 at 3:56 AM

Um... no idea what you are talking about. If you want to ping me via my contact form with details, it may make more sense. It will also help if you have code I can look so I can see the issue directly.