Posted in
ColdFusion
| Posted on 03-03-2008
| 5,388 views
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:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
<script>
function testit(x) { alert(x);}
</script>
1<script>
2function testit(x) { alert(x);}
3</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:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
<cfajaxproxy cfc="test" jsclassname="myproxy">
1<cfajaxproxy cfc="test" jsclassname="myproxy">
Back in my JavaScript, I can now create an instance of my CFC using myproxy as a class name:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
myproxy = new myproxy();
1myproxy = new myproxy();
Next I want to run a function when my server CFC is done:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
myproxy.setCallbackHandler(handleResult);
1myproxy.setCallbackHandler(handleResult);
Now let me actually call the CFC back in my testit function:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
function testit(x) {
myproxy.getData(x);
}
1function testit(x) {
2 myproxy.getData(x);
3}
"getData" is the name of a CFC method. Let's look at it now:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
<cffunction name="getData" access="remote" returnType="string" output="false">
<cfargument name="data" type="any" required="true">
<cfreturn "Yo, you sent me #arguments.data#">
</cffunction>
1<cffunction name="getData" access="remote" returnType="string" output="false">
2 <cfargument name="data" type="any" required="true">
3 <cfreturn "Yo, you sent me #arguments.data#">
4</cffunction>
Obviously real code would do a bit more. The last bit is the result handler I told my code to use:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
function handleResult(r) {
alert("Result: "+r);
}
1function handleResult(r) {
2 alert("Result: "+r);
3}
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):
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
<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>
1<cfajaxproxy cfc="test" jsclassname="myproxy">
2
3<cfquery name="entries" datasource="cfartgallery" maxrows="12">
4select *
5from art
6</cfquery>
7
8<cfset queryAddColumn(entries, "add", arrayNew(1))>
9
10<cfloop query="entries">
11 <cfset querySetCell(entries, "add", "<input value='Add' type='button' onclick='javascript:testit(#artid#)'>", currentrow)>12</cfloop>1314<script>15myproxy = new myproxy();
16myproxy.setCallbackHandler(handleResult);
1718function testit(x)
{ 19 myproxy.getData(x);
20}2122function handleResult(r)
{23 alert("Result: "+r);
24}25</script>2627<cfform name="test">28<cfgrid autowidth="true" name="entries" format="html" query="entries" width="600">29<cfgridcolumn name="artid" display="false">3031<cfgridcolumn name="artname" header="Name">32<cfgridcolumn name="price" header="Price">33<cfgridcolumn name="add" header="Add">34</cfgrid>35</cfform> Any questions?
http://blog.cutterscrossing.com/index.cfm/2007/11/...
(;)
That definitely looks like the preferred way of doing the 'column as a button' type action. Post on the first entry as well.
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