ColdFusion 8: AutoSaving with cfAjaxProxy
ColdFusion 8I'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.






Loading....