Turn your CFC into a JavaScript Object (CF8 and Ajax)

Sep 05, 2007

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). 

Comments

Davis

Davis wrote on 09/05/07 6:07 PM

Thanks! I spent hours trying to figure out how to send a simple Ajax request!
Tim

Tim wrote on 04/02/08 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.
Mike

Mike wrote on 04/03/08 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.
tom

tom wrote on 07/22/08 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?
tom

tom wrote on 07/22/08 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!
Mike Sprague

Mike Sprague wrote on 07/22/08 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.
tom

tom wrote on 07/22/08 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!
tom

tom wrote on 07/22/08 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

Write your comment



(it will not be displayed)





About Michael Sprague

Mike is a Web developer and manager from Central New York, specializing in ColdFusion, CSS, JavaScript, and Ajax development. More ...

Categories

Monthly Archives

Favorite Bloggers

Web Resources