In this post, we'll look at how to use the new jQuery templates in conjunction with ColdFusion and AJAX. If you haven't already, check out this previous post on using jQuery templates without AJAX.
If you want to skip ahead, all of the files are on github (under clienttemplates) and the working examples can be found on this link.
To keep things simple, we're going to use the cfartgallery datasource that comes with ColdFusion and we're going to use simple ORM. If you don't have the sample database installed, this example won't work, but you'll be able to get the idea.
The first thing we're going to do is setup our Application.cfc so we can use ORM:
Application.cfc:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
component{
// Application properties
this.name = hash(getCurrentTemplatePath());
this.sessionManagement = true;
this.sessionTimeout = createTimeSpan(0,0,30,0);
this.setClientCookies = true;
this.datasource = "cfartgallery";
this.clientManagement = true;
this.ormenabled = "true";
this.ormsettings = {
logSQL = false
,dbcreate = 'update'
};
}
1component{
2 // Application properties
3 this.name = hash(getCurrentTemplatePath());
4 this.sessionManagement = true;
5 this.sessionTimeout = createTimeSpan(0,0,30,0);
6 this.setClientCookies = true;
7 this.datasource = "cfartgallery";
8 this.clientManagement = true;
9
10 this.ormenabled = "true";
11 this.ormsettings = {
12 logSQL = false
13 ,dbcreate = 'update'
14 };
15}
This is pretty straightforward Application.cfc and ORM. The important parts are setting the datasource and setting ormenabled to true. If you aren't familiar with ORM, you should view Introduction to ORM or ColdFusion ORM Presentation.
The next step is to map our ORM object to the existing table:
artists.cfc:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
component persistent = true
accessors = true
entityname = 'artists'
{
property name='id' column='ARTISTID' generator='increment';
property name='FIRSTNAME';
property name='LASTNAME';
property name='ADDRESS';
property name='CITY';
property name='STATE';
property name='POSTALCODE';
property name='EMAIL';
property name='PHONE';
property name='FAX';
property name='thepassword';
}
1component persistent = true
2 accessors = true
3 entityname = 'artists'
4 {
5
6 property name='id' column='ARTISTID' generator='increment';
7 property name='FIRSTNAME';
8 property name='LASTNAME';
9 property name='ADDRESS';
10 property name='CITY';
11 property name='STATE';
12 property name='POSTALCODE';
13 property name='EMAIL';
14 property name='PHONE';
15 property name='FAX';
16 property name='thepassword';
17}
This is the simplest implementation of this object since the datasource and table already exists.
In the next step, we're going to setup our remote cfc call. This is where the power of ColdFusion ORM comes into play:
remote.cfc:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
component {
remote string function getArtist(){
return SerializeJSON(entityLoad('artists'));
}
}
1component {
2 remote string function getArtist(){
3 return SerializeJSON(entityLoad('artists'));
4 }
5}
That's all that is required to load the entire artists table and serialize it to JSON, so we can return it in the AJAX call. Very simple.
Lastly, we're going to repeat a lot of code from the previous jQuery templates post. I won't repost everything here but we'll look at the two key features we're using in this example.
The first key feature is our actual ajax call. We're going to call our remote.cfc to get our JSON. Then we're going to invoke the jQuery template and append it to our empty div in ajax.cfm:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
<script type='text/javascript'>
$(function(){
$.getJSON('remote.cfc?method=getArtist'
,{returnFormat: 'json'}
,function(data){
$('#artistTemplate')
.tmpl(data)
.appendTo('#theContacts');
});
});
</script>
1<script type='text/javascript'>
2$(function(){
3 $.getJSON('remote.cfc?method=getArtist'
4 ,{returnFormat: 'json'}
5 ,function(data){
6 $('#artistTemplate')
7 .tmpl(data)
8 .appendTo('#theContacts');
9 });
10});
11</script>
Lastly, we have our actual jQuery template. We get a little more advanced in this example and introduce an "if" conditional. This causes the phone and fax to only display if they exist in the data returned from our AJAX call. This is extremely powerful and allows us to use logic in our templates without complex JavaScript:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
<script id="artistTemplate" type="text/x-jquery-tmpl">
<div>
Name: ${ FIRSTNAME } ${ LASTNAME } <br />
EMail: ${ EMAIL } <br />
Address: <br />
${ ADDRESS } <br />
${ CITY }, ${ STATE } ${ POSTALCODE } <br />
{{if PHONE}}
Phone: ${ PHONE } <br />
{{/if}}
{{if FAX}}
Fax: ${ FAX }
{{/if}}
</div>
</script>
1<script id="artistTemplate" type="text/x-jquery-tmpl">
2 <div>
3 Name: ${ FIRSTNAME } ${ LASTNAME } <br />
4 EMail: ${ EMAIL } <br />
5 Address: <br />
6 ${ ADDRESS } <br />
7 ${ CITY }, ${ STATE } ${ POSTALCODE } <br />
8 {{if PHONE}}
9 Phone: ${ PHONE } <br />
10 {{/if}}
11 {{if FAX}}
12 Fax: ${ FAX }
13 {{/if}}
14 </div>
15</script>
If you view the source code of the example or explore the code on github, you'll see there are a few other sections for formatting, including jQuery and the template JavaScript.
Try running the code and let me know what you think.
My core expertise focuses on architecting multi-lingual, enterprise-level digital solutions, including custom CMS's and large-scale applications which span multiple devices and computing languages.
