+2

ColdFusion 8: AutoSaving with cfAjaxProxy

ColdFusion 8

I've written before about using the new ColdFusion 8 JavaScript cfform libraries to autosave a form. Autosaving a form can also be accomplished using cfajaxproxy. Lets delve into the code:

<cfajaxproxy cfc="Draft" jsclassname="DraftObj">
<s.cript type="text/javascript" src="autoSaveProxy.js">
</s.cript>
<h2>Auto Save Demo</h2>
<div id="messageArea"></div>
<form name="auto" id="auto">
Title: <input name="title" id="title" size="30"><br>
Radio: <input name="question1" value="yes" type="radio">Yes <input name="question1" value="no" type="radio">No<br>
Checkbox: <input name="question2" value="cf7" type="checkbox">CF7 <input name="question2" value="cf8" type="checkbox">CF8<br>
Entry: <textarea richtext="true" toolbar="Basic" name="entry"></textarea>
</form>

The first line creates the cfajaxproxy which makes remote functions in the Draft.cfc callable by JavaScript. The rest is simply html (I've added a dot in the script tag — remove before running)

What functions do we have in Draft.cfc?

<cfcomponent output="false">
	<cffunction name="saveDraft" access="remote">
		<cfdump var="#arguments#" output="/misc/auto.txt">
		<cfreturn true="">
        </cffunction>
</cfcomponent>

Just one that will handle saving a draft of the form. Note, that I dump the arguments scope, last time it was the form scope. Working with a cfajaxproxy is straightforward here is the Javascript:

 

function autoSave(){
var d = new DraftObj();
d.setCallbackHandler(setSaveTime);
d.setForm('auto');
d.setHTTPMethod('POST')
d.saveDraft();
autoSaveEvery(120000);
}
function autoSaveEvery(ms) {
var timeout=setTimeout("autoSave()",ms);
}
function setSaveTime(res) {
if (res) {
document.getElementById('messageArea').innerHTML = 'Autosaved at ' + nowFormated();
}
}
function nowFormated(){
var now = new Date();
var ampm = "AM";
var hour = new Number(now.getHours());
if (hour > 12) {
ampm = "PM";
hour = hour - 12;
} else if (hour == 0) {
hour = 12;
}
var minutes = new Number(now.getMinutes());
if (minutes <= 9) {
minutes = "0" + minutes;
}
return hour + ":" + minutes + " " + ampm;
}

The only difference with the JavaScript for the previous examples is in the autoSave function. The cfajaxproxy creates the JavaScript to easily send data to and from a cfc. setCallbackHandler, setForm, setHTTPMethod are all functions that come with the cfAjaxProxy as is the functionality for new DraftObj(). DraftObj is the value of the jsclassname attribute of cfAjaxproxy. More on cfAjaxProxy.

Why use cfAjaxProxy and not one of the cfform methods? If the page needs to do anything else, say, check a username or email is unique, via AJAX then cfAjaxProxy is probably the best way.

tags:
ColdFusion 8
jef said:
 
I am trying to implement the code and run into an error:

Error: [Exception... "'SyntaxError: parseJSON' when calling method: [nsIOnReadyStateChangeHandler::handleEvent]" nsresult: "0x8057001c (NS_ERROR_XPC_JS_THREW_JS_OBJECT)" location: "" data: no]

I think it traces to the handling of function setSaveTime(res), but I am very new to this technique.

Any advise is greatly appreciated.
 
posted 758 days ago
Add Comment Reply to: this comment OR this thread
 
 
@jef: Hmm, I'm not sure...I've tried a few things but have not got anything like the error you get.

Did you get it working?
 
posted 753 days ago
Add Comment Reply to: this comment OR this thread
 
John said:
 
I get that same error as Jef whenever I try anything with CFAJAXPROXY. Really frustrating as I really want to be able to play with it.
 
posted 710 days ago
Add Comment Reply to: this comment OR this thread
 
 
Hmm...let me take another look at this and see if I can track it down.
 
posted 708 days ago
Add Comment Reply to: this comment OR this thread
 
Don said:
 
Useful stuff. I've looked at the page source code, it seems that a couple of "things" would be needed for it to work.
the cf template needs to have the following:
a)
-- for binding js to cfc
b)
-- every 2 minutes
-- to load the auto save javascript
-- then of course the autoSaveEvery.js must be available
-- at this directory
c) ...
d) the Draft.cfm
-- remove the /misc/ so that the debug auto.txt would be created at the current directory.

Outcome: this auto.ext not created, how come?

 
posted 663 days ago
View Replies (1) || Add Comment Reply to: this comment OR this thread
 
.: HIDE REPLIES :.
samfarmer said:
 
@Don: It looks like the css has gotten messed up and is not displaying the actual code samples. For now the best thing to do is to do a view source and find the code that way until I work out what is going wrong with the code samples.
 
posted 662 days ago
Add Comment Reply to: this comment OR this thread
 

Search

Twitter
You should follow me on Twitter here
About Me
I am a 34-year old Web Developer specializing in ColdFusion. I live and work in downtown Washington, DC with my wife and two daughters. Read more About Me

2007 CFeMmy Best Newcommer winner
As voted on by fellow CF Bloggers.
CFinNC - Carolina ColdFusion / Flex / Air Conference - Oct 17-18, 2009