jQuery, AJAX and ColdFusion
Posted by dashCoder on January 13th, 2009This past week I had the pleasure to speak to the Twin Cities ColdFusion User group on the topic of jQuery, AJAX and ColdFusion. I felt it went surprisingly well considering I had not used jQuery until mid-December. For the most part I used examples I had picked up from various tutorials around the web. NetTuts had a great 15 part tutorial. Additionally, I picked up the book
Learning jQuery
For the ColdFusion side of the tutorial I used a modified variation of Ben Nadel's Post on jQuery with CFCs
For the closing example in the session I wrote a jQuery Client to handle Twitter searches. The core concept of the code is vary simple, put a search.twitter.com query in a requestTimeout function call and if there are new results prepend them to the list. To add a little jQuery spice I used the color animation plugin.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script src="lib/jquery/jquery.js" type="text/javascript"></script>
<script src="lib/jquery/jquery.color.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var sTerm = "ColdFusion";
var maxID = 1;
var firstRun = true;
var refreshID = setInterval(function(){
$.getJSON("http://search.twitter.com/search.json?since_id=" + maxID + "&q=" + sTerm + "&callback=?", function(data){
maxID = data.max_id;
$.each(data.results, function(i, result){
if(firstRun){
$("<div class='twit'/>").html(result.text).appendTo("#twitter").animate({ backgroundColor:'white'},5000);
}else{
$("<div class='twit'/>").html(result.text).prependTo("#twitter").animate({ backgroundColor:'white'},5000);
}
});
firstRun = false;
});
},3000);
});
</script>
<style type="text/css">
.twit{
border: 1px Solid Black;
font-size: 16px;
margin: 4px;
padding: 4px;
background-color: #0f0;
}
</style>
</head>
<body>
<div id="twitter"></div>
</body>
</html>
Obviously you could do a little more with the JSON coming back from Twitter.
{
"results":[
{
"text":"According to this http:\/\/tr.im\/5dhp Intel Core 2 Duos are 64-bit, so why can't I install the 64-bit version of ColdFusion on my MacBook Pro?",
"to_user_id":null,
"from_user":"segdeha",
"id":1114891403,
"from_user_id":1813806,
"iso_language_code":"en",
"profile_image_url":"http:\/\/s3.amazonaws.com\/twitter_production\/profile_images\/68650431\/45-spindle_normal.png",
"created_at":"Tue, 13 Jan 2009 04:18:13 +0000"
},
etc....
],
"since_id":0,
"max_id":1114891403,
"refresh_url":"?since_id=1114891403&q=ColdFusion",
"results_per_page":15,
"next_page":"?page=2&max_id=1114891403&q=ColdFusion",
"completed_in":0.01236,
"page":1,
"query":"ColdFusion"
}
Feel free to post comments or suggestions.