Web Trenches

One of my favorite new features of CF8 is the ability to create a JavaScript object from a CFC.  You can then use the object to make Ajax calls.  Here's a simple example that sends the results of checking an HTML check box into a CFC for processing...

 The CFM file:
<cfajaxproxy cfc="mycfc" jsclassname="jsobj" />
<script language="javascript">
        function checkmybox(cbox) {
            var ischecked = 1;
            // create the object
           var cfcAsAjax = new jsobj();
            if (!cbox.checked) {ischecked=0;}
            // Call the CFC function as a JavaScript function
            cfcAsAjax.setChecked(cbox.value,ischecked);
       }
</script>
 <input type="checkbox" value="1234" name="cbox1" onclick="checkmybox(this);"  /> Add 1234 to my table.<br/>
<input type="checkbox" value="5678" name="cbox2" onclick="checkmybox(this);"  /> Add 5678 to my table.

The CFC file (mycfc.cfc):
 <cfcomponent displayname="mycfc" hint="CFC for example Ajax app">
    <cffunction name="setChecked" access="remote">
        <cfargument name="boxvalue" />
        <cfargument name="ischecked" />
        <cfset var addrecord = '' />
        <cfset var deleterecord = '' />
        <cfif arguments.ischecked>
            <cfquery name="addrecord" datasource="#dsn#">
                INSERT INTO mytable(boxvaluefield)
                VALUES('#arguments.boxvalue#')
            </cfquery>
        <cfelse>
            <cfquery name="deleterecord" datasource="#dsn#">
                DELETE FROM mytable
                WHERE boxvaluefield = '#arguments.boxvalue#'
            </cfquery>
        </cfif>
    </cffunction>
</cfcomponent>

It's not an incredibly useful example as far as functionality goes, but it demonstrates how easy it is to create a JavaScript object from a CFC and use it for Ajax calls.  You could replace the check box event with any  JavaScript-triggered event.  This same functionality could be achieved using a CFINPUT and the "bind" attribute, but there are many cases where your form (or other object) is not a CF element (example, input instead of cfinput). 

11 responses to “Turn your CFC into a JavaScript Object (CF8 and Ajax)”

1. Davis Says:
   Sep 5, 2007 at 6:07 PM Thanks! I spent hours trying to figure out how to send a simple Ajax request!
2. Tim Says:
   Apr 2, 2008 at 6:28 PM How would one do this to create a recursive call to a parent to child relationship. Basically how could this be used to check or uncheck the child checkboxes based on whether or not the parent is checked or not. Any help would be greatly appreciated. Your example makes calling a cfc using cfajaxproxy seem more clear though. Thanks for this helpful post.
3. Mike Says:
   Apr 3, 2008 at 9:36 AM If I understand you correctly, you are looking for a check/uncheck all children method. I wouldn't do a recursive call on the checkmybox() function because that would send repeat ajax calls for every check box. I think I would approach it by adding a function to the parent that would do 2 things - check/uncheck all the boxes using basic JavaScript, then send in an Ajax call to a server-side function that would activate(or deactivate) all children of the item passed in. This way the check/uncheck action is taking place client side, but we only need one ajax call back to the server to perform the database work.
4. tom Says:
   Jul 22, 2008 at 9:43 AM i get an error... outside of application , no problems, but inside the application of ours... i get a "Error: Not found"
   
   try {
   var s = cfcAsAjax.insert_update_message(urlid,urlid,extmsg,newmsg,urlid);
   return s;
   } catch (e) {
   alert(e);
   }
   
   any thoughts?
5. tom Says:
   Jul 22, 2008 at 9:45 AM FYI, if i changed the call to the function "insert_update_message" to "fffinsert_update_message" ... it does know it is not a real function and error alert tell me so...
   
   please help!
6. Mike Sprague Says:
   Jul 22, 2008 at 9:58 AM It's hard to troubleshoot this without seeing the page, but my guess is that there is another function somewhere in your application's javascript named 'insert_update_message', or the cfajaxproxy tag is somehow being called twice. Since it works outside your app, something in your app is conflicting with it. Do you use Firebug? That might help you diagnose.
7. tom Says:
   Jul 22, 2008 at 10:44 AM FYI, if i changed the call to the function "insert_update_message" to "fffinsert_update_message" ... it does know it is not a real function and error alert tell me so...
   
   please help!
8. tom Says:
   Jul 22, 2008 at 10:46 AM oops, ignore the duplicate, i hit refresh on this page and it resent the other message again.
   
   It is fixed now! I created the cfc in the root of the application. I swear that did not work for me before... but happy it is working now!
   
   thanks for your response though!
   
   tom
9. amey Says:
   Nov 11, 2008 at 4:07 AM i am getting an error when calling a cfc method by java script object of cfc
   
   please provide me a solution
   
   
   
   Amey
10. long island dj's Says:
    Nov 16, 2009 at 6:59 AM where do i get more information on this
11. Guillermo Flores Says:
    Apr 12, 2010 at 11:53 AM Working Perfect...! thank for the solution!!

Leave a Reply