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

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

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

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Comments