Posted in ColdFusion | Posted on 10-23-2009 | 3,496 views
This is the third in a short series of blog entries demonstrating one way to use ColdFusion's built in Ajax code to load detail information into a form. I've written two previous entries (linked to below) and I recommend checking them out first if you have not done so already. The first entry simply bound a text field to a back end CFC. When you typed in a number the code would attempt to retrieve the complete record from the server. The second entry modified the code to use a button to perform the database lookup. This final entry (heh, I hope, the original author keeps asking for interesting tweaks!) modifies the code yet again. Now it provides a loading message while the data is being retrieved. The code isn't terribly different from before so I'll paste in the entire thing and then explain the modifications.
2<cfajaxproxy cfc="test" jsclassname="dataproxy">
3
4<script>
5function getData() {
6 document.getElementById("loading").innerHTML="Loading..."
7 var artid = ColdFusion.getElementValue("artid")
8 if(isNaN(artid)) return
9 dataService.getData(artid)
10}
11
12function showData(d) {
13 document.getElementById("loading").innerHTML=""
14 //convert into a struct
15 var data = {}
16 for(var i=0; i < d.COLUMNS.length; i++) {
17 data[d.COLUMNS[i]] = d.DATA[0][i]
18 }
19 document.getElementById('artname').value = data["ARTNAME"]
20 document.getElementById('description').value = data["DESCRIPTION"]
21 document.getElementById('price').value = data["PRICE"]
22
23}
24
25var dataService = new dataproxy()
26dataService.setCallbackHandler(showData)
27</script>
28
29<div id="loading"></div>
30
31<cfform>
32id: <cfinput type="text" name="artid" id="artid"> <cfinput type="button" name="mybutton" value="Lookup"><br/>
33name: <cfinput type="text" name="artname" id="artname" readonly="true"><br/>
34description: <cftextarea name="description" id="description" readonly="true"></cftextarea><br/>
35price: <cfinput type="text" name="price" id="price" readonly="true"><br/>
36</cfform>
The first modification is a simple one - adding a loading div. It will only be used for status messages as data is being fetched. The getData() method was then modified to change the innerHTML of the div and place a loading message. You could easily use one of those fancy animated gear-type GIFs as well. Lastly, showData was modified to remove the loading message.
That's it - and I hope these examples are helpful. I've been using jQuery so much I feel pretty rusty with the ColdFusion built-in Ajax stuff.
http://www.ajaxload.info/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jque...;
<script>
$(document).ready(function() {
$("#mybutton").click(function() {
$("#loading").html("Loading....")
var artid = $("#artid").val()
if(isNaN(artid)) return
$.getJSON("test.cfc?method=getdata&artid=" + artid + "&returnformat=json", {}, function(d,status) {
$("#loading").html("")
var data = {}
for(var i=0; i < d.COLUMNS.length; i++) {
data[d.COLUMNS[i]] = d.DATA[0][i]
}
$("#artname").val(data["ARTNAME"])
$("#description").val(data["DESCRIPTION"])
$("#price").val(data["PRICE"])
})
})
})
</script>
<div id="loading"></div>
<form>
id: <input type="text" name="artid" id="artid"> <input type="button" id="mybutton" value="Lookup"><br/>
name: <input type="text" name="artname" id="artname" readonly="true"><br/>
description: <textarea name="description" id="description" readonly="true"></textarea><br/>
price: <input type="text" name="price" id="price" readonly="true"><br/>
</form>
Just wondering on your thoughts of using cfajaxproxy vs jquery method.
From my testing Ajaxproxy, sprydataset & CFFORM generate alot of script ininline in the page. I dont mind CF creating script for me, but why cant it write an external JS file rather than inline script ?
cfajaxproxy, and other CF-built in features, are typically very easy to use. So if you aren't very comfortable with JS then I'd probably always recommend using them. For me, I'm (slowly) getting more comfortable with JS, so I prefer jQuery.
To your second point: Remember that the JS is a combination of static libraries and dynamic code. It wouldn't make sense for the dynamic code to be saved to the file system just for one request.
we currently use prototype/scriptaculous for most of our JS work. Im able to make OO based classes and completely unobtusive javascript which i can then gzip (via CF/java) and set all the correct HTTP headers (using combine.cfc) to fully optimise for the best YSlow ratings.
These are my main problem with the inline script CF generates.
1 - it breaks unobtrusive principles
2 - its not optimal in terms of performance. ie if i have the same 'AutoCompleter' on 2 pages the user must download all the required JS twice.
Cound this be a Ask-a-Jedi-ColdFusion-Ajax-example-of-retrieving-fields-of-data-4 ? -)
Thank you,
Michel
I'm guessing as I try to figure this all out, it's somehow in the window's onHide() that another call is made to the server for the final information.
[Add Comment] [Subscribe to Comments]