Friday 24 Oct 2014   
Add Comment

ColdFusion jQuery Introduction Part 1

ColdFusion Tutorial #42

jQuery is a “fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way you write JavaScript” (source: http://www.jquery.com ).

jQuery on the client makes things as simple as ColdFusion on the server. Using the two together, you can create AJAX applications (refreshing content on the client without reloading the page) quickly and easily. jQuery provides a number of ways to bring content from the server to the client. In this tutorial, we’ll look at jQuery’s getJSON() method.

getJSON() loads JSON data using an HTTP GET request (source: http://docs.jquery.com/Ajax/jQuery.getJSON

cfhttp.cfm

Let’s look at a quick sample using something you might be more familiar with... <cfhttp>. We’re going to use <cfhttp> to make a call to Twitter and get my last 20 tweets.

Note that in the URL, we’re specifying that we want the data in JSON format by appending ".json "to the username. Appending ".xml " would return XML. Since JSON is the sexier of the two, we’re going to stick wth JSON. Note that all Twitter API methods are documented at : http://apiwiki.twitter.com/Twitter-API-Documentation .

If we want to see the result, we can dump the result ( line 3 ):



jscript.js

Because the data is in JSON format, we need to wrap the result in the ColdFusion deserializeJSON() function.

Now, that’s all well and good, but hardly makes use of AJAX. Let’s bring this application into the Web 2.0 era.

Here’s the jQuery that we’re going to start off with:
* note this is not a seperate file but is seperated out in this example for clarity.



demo.cfm

As mentioned above, getJSON() is a built in jQuery method. Similar to cfhttp, but it does expect the results to be, well, JSON. In this case, that’s not a problem, as we’re still specifying JSON in the URL.

The one change we made to the URL was the addition of the “callback=?” URL parameter. As per Twitter’s API ( HYPERLINK "http://apiwiki.twitter.com/Things-Every-Developer-Should-Know" http://apiwiki.twitter.com/Things-Every-Developer-Should-Know), this parameter wraps your response in a callback method of your choice. Because jQuery’s getJSON() method wraps the callback inside the method call, we can just pass the “?” character to indicate a dynamic callback name. To clarify regarding the callback, the getJSON() method passes 3 arguments.

URL - The URL of the page to load.
data (optional) - Key/value pairs that will be sent to the server.
callback (optional) - A function to be executed when the data is loaded successfully.

Our callback function makes use of jQuery’s each() method. It’s going to loop over each element in the JSON that’s returned from the specified URL, and take an (as of yet unspecified) action.

Putting it all together, we can do the following:



Demo

See this code running!


Download

Download this code as a zip!


Comments

There are no comments!

Click button to add a comment


Author

Charlie Griefer


Published

Wednesday 02 Sep 2009

Tags

cfdump  cfhttp