CFAJAXPROXY - JavaScript object from a CFC
So its boxing day, I am sitting back and having a few beers playing around with some CF8 tags that I have not used very much over the course of the year. A few of my fellow CF developers have been saying the best tag added to ColdFusion 8 was cfajaxproxy, to be honest I don't know what all the fuss is about, until now.
I have been meaning to update some functions in SalesMaxx particularly the shopping cart and with a few beers down and nothing but reruns on TV what a better time to try cfajaxproxy.
One feature I had read about on a blog early in the year (I don't recall which) was the ability to create a JavaScript object from a CFC. Seems cool, as at the moment when you add an item to the SaleMaxx shopping cart it makes a post which calls a function, but the whole page has to be refreshed and resubmitted back to the server wasting resources. Slowly, we have been updating the application and making very good use of AJAX, but have not taken advantage of the new CF tags that do some of this hard work for us like cfdiv for example.
My first play with cfajaxproxy is a simple one. I was surprised about just how easy it was and how it just worked first time without me really digging deep into what it was doing or the functions it was creating. I know CF people will think this is a bad, but for me anything that makes my life simple is ok with me.
I wanted a way to call my CFC using cfajaxproxy. Looking at the CF8 docs jsclassname does this for you by creating a JavaScript proxy class that will represent the CFC I want to call. How cool is that!
Next I created a submit button with an onclick event, in this event using the proxy that I just created I then passed my arguments to the CFC. To capture the return from the CFC I used a simple JavaScript alert box. I found a similar example to this on EE which was perfect. For the purpose of my test everything is in the onclick event, however this is nothing stopping me from writing a proper JavaScript function with validation before its passed to the CFC.
2<cfform name="myform">
3 <cfinput type="button" value="Add To Cart" name="addme" onClick="alert((new cfccall()).addFunction(prodId=#prodId#,qty=1))" >
4</cfform>
The last thing I needed to do was to change my component to access="remote". That's it, and it just worked.
A screen shot of it in action...
2260 Views - Share
Dec26
27/12/08 06:13
Nice Post. I am using cfajaxproxy quite extensively in a new project. It has made my life so easy.
Using cfajaxproxy in a shared hosting environment can be problematic. Some hosts - Hostmysite.com, for example - dissallow or restrict access to the /CFIDE directory for security reasons. A work around for this is to copy /CFIDE/scripts to the root of your web site and then create a mapping to it in your Application.cfc. Works like a charm!