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. :)