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.
<cfajaxproxy bind="javascript:getData({mybutton@click})">
<cfajaxproxy cfc="test" jsclassname="dataproxy">
<script>
function getData() {
document.getElementById("loading").innerHTML="Loading..."
var artid = ColdFusion.getElementValue("artid")
if(isNaN(artid)) return
dataService.getData(artid)
}
function showData(d) {
document.getElementById("loading").innerHTML=""
//convert into a struct
var data = {}
for(var i=0; i < d.COLUMNS.length; i++) {
data[d.COLUMNS[i]] = d.DATA[0][i]
}
document.getElementById('artname').value = data["ARTNAME"]
document.getElementById('description').value = data["DESCRIPTION"]
document.getElementById('price').value = data["PRICE"]
}
var dataService = new dataproxy()
dataService.setCallbackHandler(showData)
</script>
<div id="loading"></div>
<cfform>
id: <cfinput type="text" name="artid" id="artid"> <cfinput type="button" name="mybutton" value="Lookup"><br/>
name: <cfinput type="text" name="artname" id="artname" readonly="true"><br/>
description: <cftextarea name="description" id="description" readonly="true"></cftextarea><br/>
price: <cfinput type="text" name="price" id="price" readonly="true"><br/>
</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.