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).
Thanks! I spent hours trying to figure out how to send a simple Ajax request!
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.
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.
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?
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!
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.
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!
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
i am getting an error when calling a cfc method by java script object of cfc
please provide me a solution
Amey
where do i get more information on this
Working Perfect…! thank for the solution!!
Hi,
How do you pass the entire form instead of some value
Instead of this:cfcAsAjax.setChecked(cbox.value,ischecked); How do I do this: cfcAsAjax.setChecked(form)
Thanks
HP
HP – you would use the onsubmit for the form tag to do this.
In mycfm.cfm I have:
…..
and mycfc.cfc has:
When I click on the Sign In link, nothing happened. I see the error in console:
SyntaxError: parseJSON
What am I doing wrong? Thank you.
Jack – this post is several years old, and I am not sure it is valid with newer versions of ColdFusion. Are you running ColdFusion 8? My first thought on your code is that the cfajaximport tag should be in the CFM file, not in the CFC. The libraries need to load before the Ajax call.
Hi Mike, I am running CF 9. I think they should be quite similar.
I now put the cfajaximport in the mycfm.cfm like this:
And the mycfc.cfc is now:
But still getting the same error 🙁
Jack, I’m not sure how much I can help you here. I haven’t used the built-in Ajax functions of ColdFusion in a long time. I will say, though, that the approach on this doesn’t seem right. I think you want all your interface elements in your CFM, and your back end functions in your CFC (like in the example I gave). In other words, bring the CFWINDOW up to the CFM. Hide it by default, and then have your link show it. Using a remote CFC for display elements probably isn’t a good approach.