Step Outside the Box – Part II

1. Step Outside the Box – Part II ColdFusion and Ajax

2. Theo Rushin Jr I am an avid snowboarder in the winter and paintball player during the other seasons. During the week I work as an independent consultant for hire. I have spent the past 6+ years establishing myself as an expert Coldfusion and Flash Rich Internet Application Developer and Trainer. During my 6 years of web application development I have created and supported many enterprise-wide web-based applications I have worked on various development efforts using technologies such as ColdFusion, Flash Actionscript, and Ajax. I can be reached at rushint@yahoo.comor on the snow

3. ColdFusion and Ajax What Is AJAX? Asynchronous JavaScript and XML AJAX itself is not a technology but a collection of existing technologies used in such a way to provide a more responsive, interactive, and Rich Internet Application-like experience. The key technology used in AJAX is the XMLHttpRequest object. It provides the capability to transmit data to and from the server without refreshing the entire page. The page then communicates with the browser’s Document Object Model (DOM) to update the page.

4. ColdFusion and Ajax What Is AJAX? (continued) • Here are the basic technologies involved in Ajax applications: • HTML is used to build Web forms and identify fields for use in the rest of your application. • JavaScript code is the core code running Ajax applications and it helps facilitate communication with server applications using the XMLHTTPRequest object. • DHTML, or Dynamic HTML, helps you update your forms dynamically. You'll use div, span, and other dynamic HTML elements to mark up your HTML. • DOM, the Document Object Model, will be used (through JavaScript code) to work with both the structure of your HTML and (in some cases) XML returned from the server.

5. ColdFusion and Ajax Is Ajax a Web 2.0 technology? Well … Yes and No

6. ColdFusion and Ajax Is Ajax a Web 2.0 technology? No because … Ajax is nothing new and has been around for years. The XMLHttpRequest object was introduced in the Internet Explorer browser back in 1999. Companies such as Google, Netflix, and Yahoo have recently re-ignited the interest in using these technologies. Take a look at these sites: http://maps.google.com/ http://www.netflix.com/Default

7. ColdFusion and Ajax Is Ajax a Web 2.0 technology? Yes because … The technologies that makeup Ajax play an integral part in delivering sites that are very interactive, responsive, and deliver a Rich Internet Application-like experience. Check out these sites: http://web2.wsj2.com/the_best_web_20_software_of_2005.htm

9. ColdFusion and Ajax Q: What are Mashups? A: A mashup is a website or web application that seamlessly combines content from more than one source into an integrated experience. Content used in mashups is typically sourced from a third party via a public interface or API. Other methods of sourcing content for mashups include Web feeds (e.g. RSS or Atom) and JavaScript. Excerpt from: http://en.wikipedia.org/wiki/Mashup_(web_application_hybrid)

10. ColdFusion and Ajax Q: How can I integrate AJAX into my ColdFusion apps? A: Use CFAJAX. CFAjax is an AJAX implementation for ColdFusion applications. It allows your ColdFusion pages to communicate with ColdFusion methods using JavaScript. CFAjax comes with easy to use JavaScript and ColdFusion API methods that help marshal the response between your CF methods and client page. CFAjax is an open source product, you are free to use and distribute CFAjax with your applications. The home for this tools is: http://www.indiankey.com/cfajax/

11. ColdFusion and Ajax Q: What browsers support CFAJAX? A: CFAJAX works on the following browsers: CFAJAX currently works on the following browsers: Firefox 1.0+ I.E. 5.0+ Mozilla 1.0+ Netscape 7.0+ Safari 1.2+

12. ColdFusion and Ajax Q: So, how do I use CFAJAX? A: After you have downloaded, installed, and configured the tool you may begin to use the following methods to make AJAX calls.

13. ColdFusion and Ajax resortViewer.cfm function getStateInfo() { var stateName = DWRUtil.getValue("state"); DWREngine._execute(_cfscriptLocation, null, ‘getStateInfo', stateName, getStateInfo_result); } • JavaScript function called when user clicks on an element on the page. • getStateInfo() – Javascript function that is called on the onClick event. • DWRUtil.getValue – CFAJAX method that returns the selected value in a form element. • DWREngine._execute – CFAJAX method that calls the server-side function passing the state variable. • _cfscriptLocation: A pointer to the location of the server-side ColdFusion template page. • null: Default value • getStateInfo: CF function that will be executed • stateName: Parameter being passed to CF function • getStateInfo_result: JavaScript callback function

14. ColdFusion and Ajax resortViewer.cfm function getStateInfo_result(result) { var divText = “”; for(i = 0; I < result.length; i++) { divText = divText + result[i].resortName + “<BR />”; } document.getElementById(“resortListing").innerHTML = divText; } JavaScript callback function called after the server-side function returns its results. You use this function to process the data that was returned from the CF function.

15. ColdFusion and Ajax resorts.cfm <cffunction name=“getStateInfo"> <cfargument name="stateName" required="yes" type="string"> <cfquery name=“qryResult” datasource=“skiresorts"> SELECT * FROM Resort WHERE state = ‘#stateName#’ </cfquery> <cfreturn qryResult > </cffunction> ColdFusion function used to retrieve all records containing the passed in stateName.

16. ColdFusion and Ajax Q: What other data types can I return? A: CFAJAX will allow you to return a variety of data types including; Strings Numerics Booleans Arrays Structures CFCs

17. ColdFusion and Ajax StringThe return for a ColdFusion string is a JavaScript string. CF <return “HELLO”> JS alert(result + “ THEO”)

18. ColdFusion and Ajax NumericNumerics returned from ColdFusion become JavaScript strings. If you return a numeric and then use the + operator in JavaScript to try to add something to it, JavaScript will join the two. You must first convert the returned value in JavaScript to a number first (e.g. var myCalc = +return + 23;) CF <return 1962> JS var myAge = +return + 2006;

19. ColdFusion and Ajax BooleanBooleans are returned as a “YES” or “NO” (all CAPS) for true or false. You may then need to convert to JavaScript booleans. CF <return true> JS if(return == “YES”) { alert(“Yes it is true”) } else { alert(“Completely false”) }

20. ColdFusion and Ajax ArrayOnly single dimension arrays are supported by CFAJAX. While ColdFusion arrays start at index 1, JavaScript arrays start at index 0. CF <cfset myArray = ArrayNew()> <return myArray> JS for(i=0; i < result.length; i++) { alert(result[i]) }

21. ColdFusion and Ajax StructureA CF struct comes back as an array of objects. Each object has two properties, KEY and VALUE (note the CAPS; the key itself is also in CAPS as in the example), representing the key and value of a member in the CF struct; the array contains each of those members e.g.: CF<cfset mystruct = StructNew()><cfset mystruct.mynumber = 1><cfset mystruct.mystring = "hello"><cfreturn mystruct> JStheStructNumberKey = return[0].KEY // returns "MYNUMBER"theStructNumberValue = return[0].VALUE // returns "1"theStructStringKey = return[1].KEY // returns "MYSTRING"theStructStringValue = return[1].VALUE // returns "hello"

22. ColdFusion and Ajax QueryThe JS object that represents a CF query is an array of row objects, with each column as a property of each object. E.G. a cfquery that returns columns ID, NAME, DATE, SIZE and has 10 rows would become a JS array of length 10, with each element an object with properties ID, NAME, DATE, SIZE (note the CAPS - all column names are capitalized in the JS object): CF <cfquery name=“qryResult” datasource=“skiresorts"> SELECT * FROM Resort WHERE state = ‘#stateName#’ </cfquery> <cfreturn qryResult > JSmyFirstRowID = result[0].ID; mySecondRowDate = result[1].DATE; etc.

23. ColdFusion and Ajax CFCCFC properties declared in THIS return exactly the way a struct does (including CAPS for key names) CF<cfset THIS.MyNumber = 1><cfset THIS.MyString = "Whatever"><cfreturn THIS> JStheCFCMyNumberKey = return[0].KEY // returns "MYNUMBER"theCFCMyNumberValue = return[0].VALUE // returns "1"theCFCMyStringKey = return[1].KEY // returns "MYSTRING"theCFCMyStringValue = return[1].VALUE // returns "whatever"

24. ColdFusion and Ajax Q: What kind of things should I watch out for? A: Yes, there are a few issues you need to know when using CFAJAX. First is the fact that CFAJAX will freeze if you attempt to return a multiline string containing line breaks. You can easily work around that by using the ReReplace function to remove line breaks. <cfset MyReturn = ReReplace(MyReturn,"[#CHR(10)##CHR(13)#]","","ALL")>

25. ColdFusion and Ajax Secondly should you wish to use the CFSAVECONTENT tag in your ColdFusion function, you must enclose your output in CFOUTPUT tags. This is because CFAJAX contains the following tag which disables all output except those enclosed in CFOUTPUT tags. <cfsetting enablecfoutputonly="yes"> Another solution would be to include a CFSETTING tag before and after your block of code, setting the enablecfoutputonly attribute off and on respectively. <cfsetting enablecfoutputonly="no"> [... Your code here ...] <cfsetting enablecfoutputonly="yes">

26. ColdFusion and Ajax Thirdly (if that’s a word) you may face cross-domain issues when trying to access resources on a different server from your ColdFusion function. By default, CFAJAX uses the HTTP POST method to pass and retrieve data. Doing so will cause the browser to display a “Security violation” popup. You can resolve the issue by using the HTTP GET method by using the following CFAJAX method. DWREngine.setVerb("GET"); //default is POST

27. ColdFusion and Ajax Lastly we can handle errors by including the following code; Add the following code to the ColdFusion page being used by you CFAJAX code. <cferror template="error.cfm" type="exception"> Add the following code to the error page specified above. <cfsetting showdebugoutput="false"> <cfoutput>alert("#JSStringFormat("Error:" & Error.Diagnostics)#");</cfoutput>

28. ColdFusion and Ajax Q: Can we look at some code? A: Yes! It’s Show And Tell

29. ColdFusion and Ajax Q: What CFAJAX resources are there? http://www.indiankey.com/cfajax/ http://cfdj.sys-con.com/read/138966.htm http://www.fusionauthority.com/Techniques/4593-Using-AJAX-with-ColdFusion-Part-I http://groups.yahoo.com/group/cfajax/