A recent post on CF-Talk asked whether ColdFusion could use AJAX to do a database lookup. This is actually extremely easy to do in ColdFusion 8+, because it natively supports returning data in the JSON format.
To show how easy this is to do, I decided to throw together a little demo. This took me about 10 minutes to write—most of which was writing the markup. However, the bulk of the work is going to be handled automatically by ColdFusion, which will handle converting your data to JSON and by the jQuery Field Plug-in (which I wrote) which will handle populating your form from the data it receives from ColdFusion.
To show just how easy this all is, here's the jQuery code required to make an AJAX call to a CFC:
$.ajax({ // the location of the CFC to run url: "example.cfc" // send a GET HTTP operation , type: "get" // tell jQuery we're getting JSON back , dataType: "json" // send the data to the CFC , data: { // the method in the CFC to run method: "getUserById" /* send other arguments to CFC */ // send the ID entered by the user , userId: $("#userId").val() } // this gets the data returned on success , success: function (data){ // this uses the "jquery.field.min.js" library to easily populate your form with the data from the server $("#frmMain").formHash(data); } // this runs if an error , error: function (xhr, textStatus, errorThrown){ // show error alert(errorThrown); } });
Our CFC looks like this:
<cfcomponent output="false"> <cffunction name="getUserById" access="remote" returnType="struct" returnFormat="json" output="false"> <cfargument name="userId" type="numeric" required="false" /> <cfset var user = structNew() /> <!---// The only tricky part here is to use the bracketed notation to match the case in your HTML, JS is case sensentive. If you use the dot notation (user.name) then the keys will be returned in uppercase. //---> <cfset user["name"] = "User " & arguments.userId /> <cfset user["email"] = "user_" & arguments.userId & "@example.com" /> <cfif (arguments.userId mod 2) eq 0> <cfset user["gender"] = "f" /> <cfelse> <cfset user["gender"] = "m" /> </cfif> <cfreturn user /> </cffunction> </cfcomponent>
I've posted a working example so that you can see how this code looks. For the "User ID" just enter any number. If an error occurs, the error callback will handle displaying the error to the screen. I've also posted the source code as a zip file you can download.
NOTE:If you're still on ColdFusion MX & 7, there's a little more work because non-string data automatically gets converted to WDDX. While there are JS libraries for converting WDDX to native JS objects, they can be hard to find now that the OpenWDDX site has been shut down. You can find tools at RIAForge though that can convert your data into a JS string--which jQuery will automatically evaluate when it's received.
UPDATE:I've added some sample code to the download to show how you can use a proxy template in you're using ColdFusion 7 to get the same results. Just look at the example_cf7.cfm. The only difference is we call the example_cf7_proxy.cfm template instead of calling the example.cfc directly. The proxy template uses CFJSON to convert the results to JSON.
[UPDATED: Friday, March 04, 2011 at 9:59:11 AM]
32 Comments
Comments for this entry have been disabled.