Yesterday, Ray posted Ask a Jedi: Using ColdFusion Ajax to set Client Variables. Now, far be it from me to steal from Ray — but what it looks like is that the question asker also posted his question to Stack Overflow; and after composing my response there I decided it would make a good blog entry too.

As it turns out, Ray's response is really clever. I'm quite fond of it, actually. But I still think mine is a bit more robust and closer to what you might call the "right" way to do it.

The question, to save you the clicking if you haven't seen either of those two pages, was how to get and set ColdFusion client variable values with JavaScript. As for dependencies, my solution uses jQuery and the returnFormat parameter added in ColdFusion 8.

What you want to do is write what would be called a Client Facade

ClientFacade.cfc: try { client[arguments.name] = arguments.val; return(true); }catch (any e){ return(false); } if (structKeyExists(client, arguments.name)){ return(client[arguments.name]); }else{ if (len(trim(arguments.defaultVal)) eq 0){ return(''); }else{ return(arguments.defaultVal); } }

And to use this component, you need to write some client-side JavaScript. As I said before, I used jQuery — because I never leave home without it.

test.cfm: foo: Set Value Alert Value $(document).ready(function(){ //attach functionality to our alert button $("#alertValue").click(function(e){ var clientVal = 'initialdata'; $.getJSON( 'clientFacade.cfc', { method:"get", returnFormat:"json", name:"foo" }, function(d){ clientVal = d; alert(clientVal); } ); //prevent the button from doing anything else e.preventDefault(); }); //attach functionality to our set button $("#setValue").click(function(e){ var success = false; var valu = $("#foo").val(); $.getJSON( 'clientFacade.cfc', { method:"set", returnFormat:"json", name:"foo", "val":valu }, function(d){ success = eval(d); if (!success){ alert('Failure'); } } ); //prevent the button from doing anything else e.preventDefault(); }); }); Note that I'm using "xscript" instead of "script" tags so that Mango will allow me to post it.

This code remotely (via AJAX) accesses ClientFacade.cfc to send data back and forth. It lets you specify a default value when getting, instead of dealing with non existence.

We start with a few simple form fields: a textbox, a button to save the value, and a button to get and alert the value. To demonstrate that it really is working over AJAX and not just reloading the page faster than can be perceived, you could simply CFDump the Client scope on the page. This would show that the values in server memory are changing without the page reloading.

Then, some click event handlers are binded to our buttons that use jQuery's getJSON method to interact with the server, and the return data is managed with anonymous callback functions.

One final note: Notice that in the SET operation, I'm quoting the variable name:"val":valuThis is because "val" is a JavaScript reserved word. I should have thought of that when writing my CFC, but I didn't, and this is how you get around the issue. (Or just rename the CFArgument, but who has time for that?)