How does this example works?
When you select a state from drop down list onChange event gets called onChange=getCounty.
The getCounty function looks like this:
function getCounty()
{
var state = DWRUtil.getValue("state");
DWREngine._execute(_cfscriptLocation, null, 'countylookup', state, getCountyResult);
}
getCounty function first gets the value of state selected , and then calls DWREngine._execute method which in turn calls
countylookup coldfusion function with the parameter as state code. The DWREngine parameters are explained below:
_cfscriptLocation -> location of the coldfusion file that has the function implementation
null, -> Default value
'countylookup', -> Coldfusion function to be called
state -> State code for which we need the county listing
getCountyResult, -> Javascript function that will be called after countylookup CF function has been executed
Coldfusion function countylookup takes one argument state and return the array of county within that state,
listed below is the CF code:
<cffunction name="countylookup">
<cfargument name="state" required="yes" type="string">
<cfset county = ArrayNew(1)>
<cfif arguments.state eq "VA">
<cfset ArrayAppend(county, "Fairfax County")>
<cfset ArrayAppend(county, "Middlesex County")>
<cfset ArrayAppend(county, "Loudoun County")>
<cfset ArrayAppend(county, "Patrick County")>
<cfset ArrayAppend(county, "Washington County")>
<cfelseif arguments.state eq "GA">
<cfset ArrayAppend(county, "Forsyth County")>
<cfset ArrayAppend(county, "Fulton County")>
<cfset ArrayAppend(county, "Gwinnet County")>
<cfelseif arguments.state eq "CA">
<cfset ArrayAppend(county, "Orange County")>
<cfset ArrayAppend(county, "San Diego County")>
<cfset ArrayAppend(county, "LA County")>
<cfelse>
<cfset ArrayAppend(county, "Not Available")>
</cfif>
<cfreturn county>
</cffunction>
When the coldfusion method returns data, getCountyResult javascript function gets executed with country Array,
the county drop down box gets filled using the DWRUtil.addOptions method from utils.js, but before we fill the
drop down with new values call to DWRUtil.removeAllOptions function is made in order to remove the older values
if we dont do that, our drop down will contain duplicate values.
function getCountyResult(countyArray)
{
DWRUtil.removeAllOptions("county");
DWRUtil.addOptions("county", countyArray);
}
|