Ask a Jedi: ColdFusion Ajax example of retrieving fields of data (2)

October 18, 2009 coldfusion

(This post is more than 2 years old.)

Earlier today I blogged a simple example of using ColdFusion Ajax controls to load detail information based on a primary key. The reader who asked the question sent me a followup asking if it was possible to change the form to use a button instead of a keypress to load the data.

Using the second code sample from my previous entry, I added a button next to the ID field.


<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>

Now for the weird part. It's easy enough to bind to a button. I'd just use {mybutton@click}. However, I still need the ID value. So in order to bind to the CFC, I'd have to use:


<cfajaxproxy bind="cfc:test.getData({artid@none},{mybutton@click})" onsuccess="showData">

Unfortunately, this then requires that the getData method have a second argument. I could just add a dummy argument to the method, but that felt wrong. I decided to take another approach.

The cfajaxproxy tag allows you to bind to JavaScript functions as well. I switched my tag to the following:


<cfajaxproxy bind="javascript:getData({mybutton@click})">

Next, I knew I still needed a way to communicate to the CFC. I added another cfajaxproxy:


<cfajaxproxy cfc="test" jsclassname="dataproxy">

The next change was to add the getData function:


function getData() {
	var artid = ColdFusion.getElementValue("artid")
	if(isNaN(artid)) return
	dataService.getData(artid)
}

I have to get the artid value manually so I made use of ColdFusion.getElmentValue. As before, I check for a valid number. Lastly I make use of dataService. What is that? I've added these two lines of JavaScript that make use of the new cfajaxproxy tag I added:


var dataService = new dataproxy()
dataService.setCallbackHandler(showData)

Basically, dataService becomes a proxy to my remote methods in the CFC. This is probably a bit confusing now so let me paste in the entire template:


<cfajaxproxy bind="javascript:getData({mybutton@click})">
<cfajaxproxy cfc="test" jsclassname="dataproxy">
<script>
function getData() {
var artid = ColdFusion.getElementValue("artid")
if(isNaN(artid)) return
dataService.getData(artid)
}
function showData(d) {
//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>

<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>

I hope this helps and shows yet another variation on the theme from earlier today.