Posted in ColdFusion | Posted on 10-18-2009 | 3,994 views
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.
2id: <cfinput type="text" name="artid" id="artid"> <cfinput type="button" name="mybutton" value="Lookup"><br/>
3name: <cfinput type="text" name="artname" id="artname" readonly="true"><br/>
4description: <cftextarea name="description" id="description" readonly="true"></cftextarea><br/>
5price: <cfinput type="text" name="price" id="price" readonly="true"><br/>
6</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:
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:
Next, I knew I still needed a way to communicate to the CFC. I added another cfajaxproxy:
The next change was to add the getData function:
2 var artid = ColdFusion.getElementValue("artid")
3 if(isNaN(artid)) return
4 dataService.getData(artid)
5}
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:
2dataService.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:
2<cfajaxproxy cfc="test" jsclassname="dataproxy">
3
4<script>
5function getData() {
6 var artid = ColdFusion.getElementValue("artid")
7 if(isNaN(artid)) return
8 dataService.getData(artid)
9}
10
11function showData(d) {
12 //convert into a struct
13 var data = {}
14 for(var i=0; i < d.COLUMNS.length; i++) {
15 data[d.COLUMNS[i]] = d.DATA[0][i]
16 }
17 document.getElementById('artname').value = data["ARTNAME"]
18 document.getElementById('description').value = data["DESCRIPTION"]
19 document.getElementById('price').value = data["PRICE"]
20
21}
22
23var dataService = new dataproxy()
24dataService.setCallbackHandler(showData)
25</script>
26
27<cfform>
28id: <cfinput type="text" name="artid" id="artid"> <cfinput type="button" name="mybutton" value="Lookup"><br/>
29name: <cfinput type="text" name="artname" id="artname" readonly="true"><br/>
30description: <cftextarea name="description" id="description" readonly="true"></cftextarea><br/>
31price: <cfinput type="text" name="price" id="price" readonly="true"><br/>
32</cfform>
I hope this helps and shows yet another variation on the theme from earlier today.
Thanks
Matt
I can shed a little bit of light on Matt's issue: The difference between 9.00 and 9.01 that breaks the cfc invocation when using a local cfc with access="remote", is the substitution of quotes for curly braces. I've made a cfc available online on a dev server to illustrate the difference - let me know if you need to see it in it's page context or it is otherwise unavailable, I've just dropped our usual directory security on the cfc.
Works (the 9.0 version):
http://128.83.148.234/bookshopdoor/captcha.cfc?met...
Doesn't work:
http://128.83.148.234/bookshopdoor/captcha.cfc?met...
The funny thing about this is the same function works in 9.0.1 when invoked on load, via <cfset foo=CreateObject("component","captcha").createCaptcha()>
but it fails in 9.0.1 when invoked via a JS function, like so:
<cfajaxproxy cfc="captcha" jclassname="cfimageCaptcha">
<script language="Javascript">
var refreshCaptcha = function() {
var jsCaptcha = new cfimageCaptcha();
jsCaptcha.setCallbackHandler(populateCaptcha);
jsCaptcha.createCaptcha();
}
</script>
Spark any ideas?
We are having the same issue of CF 9.0.1 breaking the CF Ajax Tag.
Is there any solution for this issue?
Thanks.
[Add Comment] [Subscribe to Comments]