Monday, 8 February 2010

AJAX Reference 2

Another quick reference to achieve the same thing as this post but this time using <cfajaxproxy>.

time.cfm

<cfajaxproxy cfc="Time" jsclassname="Time">

<html>
  <head>
    <script src="js/time.js" type="text/javascript"></script>
  </head>
  <body>
    <form name="myForm">
      Name: <input id="username" type="text" onkeyup="getTime();" />
      Time: <input id="time" type="text" />
    </form>
  </body>
</html>

Time.cfc

<cfcomponent output="false">    
  <cffunction access="remote" name="getTime" returntype="string" returnformat="json">
    <cfreturn timeFormat(now())>
  </cffunction> 
</cfcomponent>

time.js

function getTime() {
  var time = new Time();
  time.setCallbackHandler(getTimeSuccess);
  time.setErrorHandler(getTimeError);
  return time.getTime();
}

function getTimeSuccess(result) {
 document.myForm.time.value = result;
}

function getTimeError(code, message) {
  alert(code + " - " + message);
}

Binding to display controls

Binding data returned from an ajax proxy to UI widgets is worth a mention:

data.cfm

<cfajaxproxy cfc="Data" jsclassname="Data">

<html>
  <head>
  </head>
  <body>
    <cfform>
      <cfgrid format="html"
              name="myGrid"
              pagesize=10
              sort=true
              bind="cfc:Data.getData({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})"
              selectMode="row">

        <cfgridcolumn name="Id" display=true header="Id"/>
        <cfgridcolumn name="Description" display=true header="Description"/>
      </cfgrid>
    </cfform>
  </body>
</html>

Data.cfc

<cfcomponent output="false">

  <!---
  Create some mock data
  ---> 
  <cfset data = createData()>

  <cffunction name="createData" access="private" returntype="query">   
   <cfset var data = queryNew("Id, Description", "Integer, VarChar")>
   <cfset var i = 0>
   
   <cfset queryAddRow(data, 1000)>
    <cfloop index="i" from="1" to="1000">
      <cfset querySetCell(data, "Id", i, i)>
      <cfset querySetCell(data, "Description", "Item #i#", i)>
    </cfloop>
    
    <cfreturn data>  
  </cffunction>

  <cffunction name="getData" access="remote" returntype="struct" returnformat="json">
    <cfargument name="page">
    <cfargument name="pageSize">
    <cfargument name="gridSortColumn">
    <cfargument name="gridStartDirection">
    
    <cfset var qryData = ''>

    <!---
    Query data
    --->
    <cfquery name="qryData" dbtype="query">
      SELECT
        Id,
        Description
      FROM
        data

      <cfif ARGUMENTS.gridSortColumn NEQ "">
        ORDER BY
          #ARGUMENTS.gridSortColumn#
      </cfif>

      <cfif ARGUMENTS.gridStartDirection NEQ "">
        #ARGUMENTS.gridStartDirection#
      </cfif>
    </cfquery>

    <cfreturn queryConvertForGrid(qryData, ARGUMENTS.page, ARGUMENTS.pageSize)>
  </cffunction>
</cfcomponent>

Source Code

at