Darryl Lyons' Blog
ColdFusion, AJAX and web...
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.
By Unknown, at
7/01/2010 12:17:00 pm
For professional women, it is an investment. This is very quintessential because it is quite simple but looks very good in the corporate world. All this can fit in just one package.
Coach handbags noticed how appealing the Coach Legacy are for corporate women that they came up with another one that women can use. They introduced the Coach Madison . Along with Coach Poppy , it gives the corporate woman the simple yet professional and fashionable look that they need.
When you hear Chanel handbags being mentioned anywhere, the concept of high fashion comes to mind. When you attend a social function, you will realize that most women are carrying handbags designed by replica Chanel handbags . These accessories can also be carried to the office. The Chanel handbag carriers and purses are not just mere fashion accessories. Chanel can come in handy when you do not have space to put your personal things.
» Post a Comment