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.