Jul

30

Ajax Plumbing – Part II

Filed Under ColdFusion | 11 Comments


As we have seen, the CFDIV tag creates an Ajax area and also fetches markup for that area through the bind expression. The CFAJAXPROXY is the other important tag that makes Ajax easy by invoking logic on the server side to fetch data.

CFAJAXPROXY creates a JavaScript proxy object for the CFC. Effectively, the CFC now becomes available in JavaScript. The proxy object makes an HTTP call to the CFC in the background and gets the JSON data from the server.

 

<cfajaxproxy cfc = “books" jsclassname = “jsbooks“>
<script>
var b = new jsbooks();
var details = b.getBookDetails();
</script>

All the nitty-gritty of underlying JavaScript that is required to get the call going to the CFC, formatting and fetching values for the arguments are completely abstracted.

Apart from the functions that are available on the CFC there are various built-in functions that will be available as a part of each of the proxy object.

§ setHTTPMethod – To set the HTTP method, either the “GET” or the “POST”

§ setAsyncMode, setSyncMode – To set the synchronous or the asynchronous mode. By default it is the synchronous mode.

§ setCallBackHandler – To set a JavaScript call back handler for the asynchronous mode.

§ setErrorHandler – To set the JavaScript error handler.

§ setQueryFormat – To set the query format for the query returned from the server, either the “row” or the “column”

§ setReturnFormat – To set the return format for the data returned. By default the data format is JSON. It can also be set to WDDX or plain.

§ setForm – To set the id of the form. Once set, the values from the elements inside of the form are sent to the CFC as key value pair.

ColdFusion.navigate()

The JavaScript ColdFusion.navigate function fetches the markup from a cfm replacing it into a container (div, CFDIV, CFLAYOUTAREA, CFWINDOW or CFPOD).

ColdFusion.navigate(url, id, callback, errorHandler, httpMethod, formId)

<a href=“
javascript:ColdFusion.navigate(
‘getBookDetails.cfm’,’bookdetails’)”
>Navigate</a>
<div id=“bookdetails”/>

Server Functions – AjaxLink, AjaxOnLoad

The AjaxLink automagically finds the container under which the anchor href tag is present and reloads the container with the url present as href once the link is clicked.

<cfdiv>
First Page
<a href=“#AjaxLink(‘nextpage.cfm’)#”>Next Page</a>
</cfdiv>

The AjaxOnLoad(functionName) function makes sure that the function is called on load after all the ColdFusion Ajax UI components are created. This function is useful when it is required to act on the Ajax UI Components on load of the page.

Other Functions

ColdFusion.Ajax.SubmitForm(formId, url, callbackhandler, errorhandler, HTTPMethod, aync)

ColdFusion.getElementValue(elementname, formname, attribute)

ColdFusion also has a client side logger that logs all relevant information from the JavaScript. The logger comes up when the cfdebug parameter is passed in the url.

url.cfm?cfdebug

The logger has to be enabled from the administrator and the IP address of the client machine has to be included in the list of debug IP addresses for the logger to come up.





















Additional messages can be logged into the client side logger using the following JavaScript functions.

§ ColdFusion.Log.debug(message, component)

§ ColdFusion.Log.info(message, component)

§ ColdFusion.Log.error(message, component)

§ ColdFusion.Log.dump(object, component)

The ColdFusion.Log.dump is an interesting client side version of the CFDUMP tag in ColdFusion.

Comments

11 Responses to “Ajax Plumbing – Part II”

  1. Shahbaz Mirza on August 1st, 2007 8:35 am

    Hello

    I am very interested in the AJAX implementation in CF 8… I have an application running using CF 7 and ‘Prototype’ flavor of ajax.

    An alomst imediate need came up for me to push data to the client. Is this something available in CF 8 and/or something Adobe is looking into?

    Thanks!

    Shahbaz Mirza

  2. Rakshith on August 2nd, 2007 5:33 am

    Shahbaz,
    Nice to know that you interested in the Ajax implementation in CF8.

    We don’t have anything in Ajax support in CF 8 for pushing data to the client.

    CF 8 has Flash Media Server Gateway or the FMS Gateway using which you can push data to the client.
    You could also use the LiveCycle Data Services in CF 8 to push data to the client.

    Thanks..

  3. Patrick Whittingham on August 6th, 2007 9:08 am

    Can the “CFAJAXPROXY” tag handle cross-domain issues or it this CFC on the same app server which sent the original html/css/js?

  4. Rakshith on August 6th, 2007 11:37 pm

    Patrick,
    The CFAJAXPROXY will have all the security restrictions associated with any Ajax call. The CFC must be available on the same domain that served the original request.

    Thanks..

  5. Ernest Breau on August 10th, 2007 8:11 am

    OT:
    I dont know where to post this to find an answer since prforum is down.

    So if you could kindly answer or direct me to the right place would be greatly appreciated.

    I need to bring a cfwindow to the front.
    ColdFusion.Window.show does not do this.

    Thanks,
    Ernest Breau

  6. Rakshith on August 11th, 2007 12:02 pm

    I will try to answer your question..

    Are you sure ColdFusion.Window.show does not bring the window to the front?

    You can bring a window to the front using the Ext API Ext.DialogManager.bringToFront(targetWindow)..

    You can get the targetWindow from the ColdFusion API ColdFusion.Window.getWindowObject(windowname).

    Hope this helps..

  7. Dave Cozens on October 2nd, 2007 11:49 pm

    Regarding “…all the security restrictions associated with any Ajax call. The CFC must be available on the same domain that served the original request”…

    But you can make the CFC make CFHTTP calls to a remote server on a different domain.

    i.e.
    -cfajaxproxy calls books.cfc
    -books.cfc calls http://www.otherdomain.com/somefeed
    -books.cfc returns data to cfajaxproxy
    -cfajaxproxy makes data available through JS

    It’s like some crazy kind of double proxy…

    Dave

  8. Rakshith on October 17th, 2007 6:03 am

    @ Dave – The are specific reasons why each and every browser has this same domain access security set up. The browsers do not want any malicious JavaScript to make calls to other domains possibly getting harmful content or transferring valuable JSON data in the JavaScript to these domains.

    A proxy on the server side is not at all an issue because the fetch is happening at the server side and not from any third party JavaScript.

  9. Dave Phipps on December 20th, 2007 10:38 am

    Is it possible to us the AjaxLink function in a cflocation call. I am seeing problems resulting from a cflocation after a form submission – if the form is then submitted again the whole page is refreshed instead of just the cfdiv containing the form.

    Dave

  10. Ravi on November 10th, 2009 9:16 am

    Hi Rakshith,

    How do I show ColdFusion.Log.info(message, component) as an alert using javascript? Do you have an example?

    Ravi

  11. Rakshith on December 8th, 2009 12:06 am

    @Ravi: If you interested in alerting the message you should just stick to directly alerting your message rather than calling ColdFusion.Log.info.

Leave a Reply