Simple Example of jQuery Templates Loading JSON data
jQuery templates are a cool way to tie a datasource (often json, but at least arrays of maps/structurscriptput. First we define a template which are placed within script tags so that the browser ignores the html inside it:
<script id="artistsTemplate" type="text/x-jquery-tmpl">
<div><h4>#${artistid} ${firstname} ${lastname}</h4>${city} ${state}</div>
</script>
jQuery templates will loop over the array of maps/structures and for each ${xxx} replace the it with the value of a key of the same name (xxx). Quick sample of the first two records of data:
[
{"state":"CO","lastname":"Donolan","firstname":"Aiden","artistid":1,"city":"Denver"},
{"state":"CA","lastname":"Weber","firstname":"Austin","artistid":2,"city":"Berkeley"}
]
The output from that we will place in the following div:
<div id="artistsContent"></div>
Data will be loaded each time we click on the Load Data button:
<div><button iscript">Load Data</button> <span id="lastLoad"></span></div>
Here is the jQuery that makes it all happen:
<script type="text/javascript">
$(document).ready(function(){
$("#getData").click( function() {
$.getJSON("artistsRemote.cfc?method=getArtists&returnformat=json",
function(data){
//empty out the div that will hold the generated content
$("#artistsContent").empty();
//call the tmpl function, pass in the data and have it append to artistsContainer
$("#artistsTemplate").tmpl( data ).appendTo("#artistsContent");
//indicate when last loaded
var nowIs = new Date().toLocaleString();
$('#lastLoad').html( nowIs );
});
});
});
</script>
And what it looks like:
Getting the json data from ColdFusion is pretty easy. Here is the full ArtistsRemote.cfc (pick one of the return statements!):
component {
remote function getArtists() {
return entityLoad( "Artists", {}, "artistid");
return ormExecuteQuery(" SELECT new map(artistid as artistid, firstname as firstname, lastname as lastname,
city as city, state as state ) FROM Artists ORDER BY artistid");
}
}
The first return statement will serialize the whole object, the second just the five properties we will display.
Application.cfc:
component {
this.name = "templatesSample";
this.datasource = "cfartgallery";
this.ormEnabled = true;
}
For this example I am letting ColdFusion introspect the database for all columns which makes Artists.cfc pretty small:
component persistent="true" {
}
Finally for reference here is the full html page:
<html>
<head>
<title>Template Fun</title>
<style type="text/css">
body { font-family: Arial; font-size: 0.8em; }
h4 { margin: 0.5em 0 0 0 }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#getData").click( function() {
$.getJSON("artistsRemote.cfc?method=getArtists&returnformat=json",
function(data){
//empty out the div that will hold the generated content
$("#artistsContent").empty();
//call the tmpl function, pass in the data and have it append to artistsContainer
$("#artistsTemplate").tmpl( data ).appendTo("#artistsContent");
//indicate when last loaded
var nowIs = new Date().toLocaleString();
$('#lastLoad').html( nowIs );
});
});
});
</script>
</head>
<body>
<div><button id="getData">Load Data</button> <span id="lastLoad"></span></div>
<script id="artistsTemplate" type="text/x-jquery-tmpl">
<div><h4>#${artistid} ${firstname} ${lastname}</h4>${city} ${state}</div>
</script>
<div id="artistsContent"></div>
</body>
</html>
3 Comments
By: Chad 03/28/2012 2:56 PM
By: Sam Farmer 03/28/2012 7:00 PM
By: Christopher Chin 06/21/2011 1:45 PM