Adding an ADD button for cfgrid - Part Deux

This post is more than 2 years old.

Earlier today I blogged an example of adding a button to a CFGRID control. A few readers asked I complete the example by hooking up the code to a back end CFC. Here is a simple example of how to do that. First off - be sure to read the first entry so you understand where these code blocks fit in the total picture.

Let's begin by looking at the function that currently responds to the grid click:

<script> function testit(x) { alert(x);} </script>

My first task is to hook this up to the back end. ColdFusion makes this incredibly easy. First I'll add my cfajaxproxy tag:

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

Back in my JavaScript, I can now create an instance of my CFC using myproxy as a class name:

myproxy = new myproxy();

Next I want to run a function when my server CFC is done:

myproxy.setCallbackHandler(handleResult);

Now let me actually call the CFC back in my testit function:

function testit(x) { myproxy.getData(x); }

"getData" is the name of a CFC method. Let's look at it now:

<cffunction name="getData" access="remote" returnType="string" output="false"> <cfargument name="data" type="any" required="true"> <cfreturn "Yo, you sent me #arguments.data#"> </cffunction>

Obviously real code would do a bit more. The last bit is the result handler I told my code to use:

function handleResult(r) { alert("Result: "+r); }

And that's it. I can't rave enough about cfajaxproxy. Let's look at the complete page (I won't bother posting test.cfc, as all it was was the method above):

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

<cfquery name="entries" datasource="cfartgallery" maxrows="12"> select * from art </cfquery>

<cfset queryAddColumn(entries, "add", arrayNew(1))>

<cfloop query="entries"> <cfset querySetCell(entries, "add", "<input value='Add' type='button' onclick='javascript:testit(#artid#)'>", currentrow)> </cfloop>

<script> myproxy = new myproxy(); myproxy.setCallbackHandler(handleResult);

function testit(x) { myproxy.getData(x); }

function handleResult(r) { alert("Result: "+r); } </script>

<cfform name="test"> <cfgrid autowidth="true" name="entries" format="html" query="entries" width="600"> <cfgridcolumn name="artid" display="false">

<cfgridcolumn name="artname" header="Name"> <cfgridcolumn name="price" header="Price"> <cfgridcolumn name="add" header="Add"> </cfgrid> </cfform>

Any questions?

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, 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

Archived Comments

Comment 1 by Steve &aposCutter&apos Blades posted on 3/4/2008 at 4:00 AM

@Ray - I put up a similar entry on this exact issue back in November, but took a slightly different approach:

http://blog.cutterscrossing...

Comment 2 by Raymond Camden posted on 3/4/2008 at 4:09 AM

Sorry, but different approaches are now allowed here. Please delete your blog entry.

(;)

That definitely looks like the preferred way of doing the 'column as a button' type action. Post on the first entry as well.

Comment 3 by Ron McKay posted on 3/11/2008 at 11:51 PM

Ray, When implementing the sample you have here...I keep running into problems. The first issue is when the ADD button is clicked a 2nd time we are getting this error as reported from FireBug:

MyProxy is not a constructor
MyProxy(121)
onclick(click clientX=0, clientY=0)

The other issue is when the new MyProxy is outside of the function "testit" I immediately get the "MyProxy is not a constructor" error. When I move it inside the testit function I get the error after the ADD button is clicked the 2nd time. The first time the ADD button is clicked it works fine and the way it should. It is the subsequent clicks where the problem begins.

Here is the current JavaScript:
<script language="javascript" type="text/javascript">
function testit(x) {
MyProxy = new MyProxy();
MyProxy.setCallbackHandler(handleResult);
MyProxy.getData(x);
}
function handleResult(r) {
alert("Result: "+r);
}
</script>

Any ideas on what I might be missing?

Ron

Comment 4 by Ron McKay posted on 3/12/2008 at 1:40 AM

Ok, never mind... The reason I was getting the error was because the <cfajaxproxy> and <script> statements were outside of my <cfsavecontent> variable. That was causing the ajax proxy to load AFTER the JavaScript function.

Comment 5 by Wayne Pankey posted on 12/6/2008 at 3:31 AM

Hi All. This example worked great! One problem... How do I pass multiple grid values to my proxied function? Is this possible?