Darryl Lyons' Blog
ColdFusion, AJAX and web...
Please note, new blog at http://www.acheron.org/darryl/
Tuesday, May 17, 2005AJAX example using jsonencode() UDF
A little while ago I put up a post about using CFWDDX to generate JavaScript code, and using dynamic script tags as a mechanism to transfer the JavaScript data from the server to the client. I thought it would be a good idea to redo the example code using Jehiah Czebotar's jsonencode() UDF, which creates valid lighweight JSON encoded data. If you're still wondering what JSON is, here is a quick definition:JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. http://www.json.org/The purpose of this example is to show you how easy it is to get data from the server without refreshing the page. It would even be easier if I used one of the AJAX libraries out there. display.html This is a sample HTML page that contains the empty table ready for population. Clicking on the "call getArtists..." link performs an asynchronous call which gets the data from ColdFusion and then populates the table.
<html>
<head>
<title>JSON Test</title>
<script src="artists.js"></script>
</head>
<body>
<a href="javascript:getArtists()">Call getArtists() method -- appends to table!</a>
<br/><br/>
<table id="artistTable">
<caption>Artists</caption>
<thead>
<tr>
<td>ID</td>
<td>Last Name</td>
<td>First Name</td>
<td>City</td>
</tr>
</thead>
</table>
<script>
getArtists();
</script>
</body>
</html>
artists.js
This JavaScript file contains methods that will dynamically create the SCRIPT tag. The src attribute of the SCRIPT tag is the getData.cfm ColdFusion template, which creates the JSON data.
The populateUI method (which populates the table with the data) is only called once the SCRIPT tag's readyState has changed to "loaded" (e.g. the data has loaded).
The only change I had to make was the loop over the data. I now use the RECORDCOUNT for the loop condition, and reference the columns of each query row using struct of array notation.
function getDataFromServer(id, url, callback)
{
var oScript = document.getElementById(id);
var head = document.getElementsByTagName("head").item(0);
if (oScript)
{
// Destory object
head.removeChild(oScript);
// Create object
oScript = document.createElement("script");
}
else
{
// Create object
oScript = document.createElement("script");
}
var dtRf = new Date();
oScript.setAttribute("src",url + "?rf=" +dtRf.getTime());
oScript.setAttribute("id",id);
head.appendChild(oScript);
if (oScript.readyState!="loaded")
{
oScript.onreadystatechange = function()
{
if (this.readyState == "loaded")
{
eval(callback);
oScript.onreadystatechange = null;
}
}
}
else
{
alert('Cannot load data!');
}
}
function getArtists()
{
getDataFromServer("artistData","getData.cfm","populateUI()");
}
function populateUI()
{
oTable = document.getElementById("artistTable");
// Loop over the data
for (var i=0; i < QARTISTS.RECORDCOUNT; i++)
{
// Create a new TR element
oTR = oTable.insertRow();
// Create a call for each element in struct
oTD = oTR.insertCell();
oTD.innerHTML = QARTISTS.DATA.ARTISTID[i];
oTD = oTR.insertCell();
oTD.innerHTML = QARTISTS.DATA.LASTNAME[i];
oTD = oTR.insertCell();
oTD.innerHTML = QARTISTS.DATA.FIRSTNAME[i];
oTD = oTR.insertCell();
oTD.innerHTML = QARTISTS.DATA.CITY[i];
}
}
getData.cfm
This a ColdFusion template that performs a query on the database, and then encodes the ColdFusion variable as JSON data. json.cfm contains the jsonencode UDF.
<cfsetting enablecfoutputonly="true">
<cfinclude template="json.cfm" />
<cfquery datasource="cfartgallery" name="qData">
SELECT *
FROM artists
ORDER BY lastname, firstname
</cfquery>
<cfoutput>QARTISTS = #jsonencode(qData)#;</cfoutput>
By 
, at
7/26/2005 09:40:00 am
was that last line supposed to be cfscript instead of cfoutput?
By 
Darryl Lyons, at
7/29/2005 10:53:00 pm
You mean in the getData.cfm file? No, it was meant to be CFOUTPUT. I am creating JavaScript code, so the semi-colon was intentional.
By Unknown, at
6/24/2010 12:05:00 pm
vuitton replica
are an important part of fashion, the type of louis replica
that a lady carries will affect the way her wardrobe looks, carrying louis vuitton replica
made by popular designer labels has been very fashionable.
» Post a Comment