Using Ajax in ColdFusion is simpler than most people think

Tags: General, Ajax, Coldfusion, extJS, Javascript

I thought I would post this very quick Ajax tutorial and how easy it is to use, without using any extra frameworks or JavaScript libraries that don't already come with ColdFusion.

ColdFusion comes with extJS under the hood since ColdFusion 7, a lot of people tend to forget that this library is quiet flexible and powerful. The following snippet works under ColdFusion 8 and ColdFusion 9, but is untested in ColdFusion 7.

To get things started we are going to first create a simple form.

<form name="clientForm" action="ajax-client_lookup.html" method="post">
   <fieldset>
      <legend>Client information</legend>
      <table>
         <tr>
            <td><label for="clientID">Client ID:</label></td>
            <td><input name="clientID" id="clientID" size="5" maxlength="4" onBlur="testForm(this);"></td>
         </tr>
         <tr>
            <td><label for="firstname">First name:</label></td>
            <td><input name="firstname" id="firstname" size="20" maxlength="255"></td>
         </tr>
         <tr>
            <td><label for="lastname">Last name:</label></td>
            <td><input name="lastname" id="lastname" size="20" maxlength="255"></td>
         </tr>
         <tr>
            <td><label for="address">Address:</label></td>
            <td><input name="address" id="address" size="20" maxlength="255"></td>
         </tr>
         <tr>
            <td><label for="zipCode">Zipcode:</label></td>
            <td><input name="zipCode" id="zipCode" size="4" maxlength="5"></td>
         </tr>
         <tr>
            <td><label for="city">City:</label></td>
            <td><input name="city" id="city" size="20" maxlength="255"></td>
         </tr>
         <tr>
            <td><label for="country">Country:</label></td>
            <td><input name="country" id="country" size="20" maxlength="255"></td>
         </tr>
      </table>
   </fieldset>
</form>

That is the bases of our form, which you will notice that we have also included an onBlur event for the running of some JavaScript code. But before we add that we need to add the following to the top of our code, this tells ColdFusion to use extJS.

<script type="text/javascript" src="/cfide/scripts/ajax/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/cfide/scripts/ajax/ext/ext-all.js"></script>

Ok seems pretty simple. Now we are going to quickly create a simple ColdFusion component on the server that we are going to call and use as our basis to return data to the browser. This component is very straight forward, and self explanatory.

<cfcomponent>
   <cffunction name="getDataTest" access="remote" returntype="struct">
      <cfargument name="recordId" type="Numeric" required="true">
      <cfset var local = {} />
      <cfset local.returnData["firstname"] = 'Andrew' />
      <cfset local.returnData["lastname"] = 'Scott' />
      <cfreturn local.returnData />
   </cffunction>
</cfcomponent>

As you can see we are creating a very simple structure that will be returned back to the caller. So the next step is to get this into our browser, this step is a lot easier than most people seem to think. And here is why.

ColdFusion has a nice little trick add this to the top of your page underneath the script blocks you added earlier.

<cfajaxproxy cfc="com.test" jsclassname="testData">

Ok so what does this do, well it maps a CFC Component to JavaScript. Now remember we had an onBlur event in our form. The last step is to now add that function to our page.

<script>
   function testForm(data) {
      test = new testData();
      returnData = test.getDataTest(data.value);
      Ext.get('firstname').set({value: returnData.firstname});
      Ext.get('lastname').set({value: returnData.lastname});
   }
</script>

And that's it.

As you can see we are now creating a new JS object called test in the above code, we then call the method getDataTest which then makes an ajax call back to the server and returns the structure.

We then use extJS to get the ID values of the form and set the value of that object with the element to the returned data. How easy can that be?


TweetBacks


Comments (Moderated) | Add Comment

  • Rey Bango's Gravatar The reason most people don't use it is due to:

    1) Size overhead in loading it
    2) The fact that the version that came w/ CF7 even 8 were already very outdated in comparison to what was being shipped
    3) The fact that many other libs provided an API that was far simplier to leverage (eg: jQuery)

    Ext is definitely a well-built library w/ a great UI suite but leveraging what comes w/ CF tends to be impactical unfortunately.
    # Posted By Rey Bango | 8/16/09 10:24 AM
  • Andrew Scott's Gravatar True, but in the above example if you are not going to use the widgets you can remove the ext-all.js include and it is very light weight.

    This is the begining of a series of tutorials that I plan to show how to leverage and extend your applications while using ColdFusion. Without installing an using another JS framework.

    With the advent of ColdFusion 9 being released soon, it wont be out of date.
    # Posted By Andrew Scott | 8/16/09 3:06 PM

Comments (Moderated) | Add Comment