CFAjaxproxy Bind Magic
Posted By : todd sharp Posted At : January 8, 2008 9:16 AM Posted In: Ajax, ColdFusion
6
I'm working on a small project with some of the ColdFusion 8 Ajax magic and on a whim decided to try using cfajaxproxy in a 'creative' manner. Turns out it worked quite nicely. Here's my situation: In the past we would put our JavaScript calls inline on an HTML element (in an onClick event or some such) or we'd use the good old <a href="javascript:foo();"></a> method. The recent unobtrusive, cross-browser compatible trends have lead us to use our JavaScript framework to attach these events. For example in Spry we might have:
foo = function(){
alert('you clicked me!');
}
//attach the event to the fooDiv
Spry.Utils.addLoadListener(function(){
Spry.Utils.addEventListener("fooDiv", "click", foo, false);
});
</script>
<div id="fooDiv" style="cursor: pointer;">click me</div>
So part of my project is to highlight the beauty, power and simplicity of the ColdFusion 8 Ajax functionality. With that in mind I thought of the cfajaxproxy tag which can be used to bind form elements. I decided to try using it with a div instead, and it turns out it worked. There is one minor catch - cfajaxproxy requires a simple value to be passed. Simply passing the id of the div won't work because CF evaluates that id to the HTML element - which is not a simple value. I got around that by passing the innerHTML value of the div like so:
<script>
foo = function(){
alert('you clicked me!');
}
</script>
<div id="fooDiv" style="cursor: pointer;">click me</div>
I like the idea, but maybe there is a better way to pass a simple value than the innerHTML.
bind="javascript:foo({fooDiv.id@click})"