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:
- Click a button
- Tell the user the slow process is begun
- Fire off an Ajax request to the server
- 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. :)