How does this example works?
When you select a region from drop down list onChange event gets called onChange=getNBADivisionStanding.
The getNBADivisionStanding function looks like this:
function getNBADivisionStanding()
{
var _division = DWRUtil.getValue("division");
DWREngine._execute(_cfscriptLocation, null, 'nbadivisionstanding', _division, NBADivisionStandingResult);
}
getNBADivisionStanding function first gets the value of region selected , and then calls DWREngine._execute method which in turn calls
nbadivisionstanding coldfusion function with the parameter as division code. The DWREngine parameters are explained below:
_cfscriptLocation -> location of the coldfusion file that has the function implementation
null, -> Default value
'nbadivisionstanding', -> Coldfusion function to be called
_division -> divison/region for which we need the team scores/standing
NBADivisionStandingResult, -> Javascript function that will be called after nbadivisionstanding CF function has been executed
Coldfusion function getNBADivisionStanding takes one argument state and return a query of team withing that region/division,
listed below is the CF code:
<cffunction name="nbadivisionstanding">
<cfargument name="region" required="yes" type="string">
<cfset standingArray = ArrayNew(1)>
<cfif arguments.region eq "AT">
<cfset ArrayAppend(standingArray, "Boston,45,37")>
<cfset ArrayAppend(standingArray, "Philadelphia,43,39")>
<cfset ArrayAppend(standingArray, "New Jersey,42,10")>
<cfset ArrayAppend(standingArray, "Toronto,33,49")>
<cfset ArrayAppend(standingArray, "New York,33,49")>
<cfelseif arguments.region eq "CE">
<cfset ArrayAppend(standingArray, "Detroit,54,28")>
<cfset ArrayAppend(standingArray, "Chicago,47,35")>
<cfset ArrayAppend(standingArray, "Indiana,44,38")>
<cfset ArrayAppend(standingArray, "Cleveland,42,40")>
<cfset ArrayAppend(standingArray, "Milwaukee,30,52")>
<cfelseif arguments.region eq "SE">
<cfset ArrayAppend(standingArray, "Miami,59,23")>
<cfset ArrayAppend(standingArray, "Washington,45,37")>
<cfset ArrayAppend(standingArray, "Orlando,36,46")>
<cfset ArrayAppend(standingArray, "Charlotte,18,64")>
<cfset ArrayAppend(standingArray, "Atlanta,13,69")>
</cfif>
<cfset myQuery = QueryNew("state, won, lost")>
<cfloop from="1" to="#ArrayLen(standingArray)#" index="i">
<cfset newRow = QueryAddRow(MyQuery)>
<cfset temp = QuerySetCell(myQuery, "state", ListGetAt( standingArray[i],1))>
<cfset temp = QuerySetCell(myQuery, "won", ListGetAt( standingArray[i],2))>
<cfset temp = QuerySetCell(myQuery, "lost", ListGetAt( standingArray[i],3))>
</cfloop>
<cfreturn myQuery>
</cffunction>
When the coldfusion method returns data, NBADivisionStandingResult javascript function gets executed with teams Array and the
table gets created using the DWRUtil.addRows method from utils.js but before the rows/table is created the previous data is removed using DWRUtil.removeAllRows method:
function NBADivisionStandingResult(teams)
{
DWRUtil.removeAllRows("teamsBody");
DWRUtil.addRows("teamsBody", teams, [ getState, getWon, getLost ])
}
Since we are returning a query back to the html page, the CFAjax engine converts query into javascript array with each array holding
a record as a class, and in order to render the record in the tabular format using the utils.js we have to provide addRows
function the reference of each class element that’s why we have the add this additional code in the HTML page
var getWon = function(team) { return team.WON };
var getLost = function(team) { return team.LOST };
var getState = function(team) { return team.STATE };
|