CFAjax

[ Home ] [ Examples ] [ Project / Download ] [ FAQ / How To] [ Docs/Articles] [ About Me ]

Populating Lists Key and Value attribute

Example
Select a phone brand :
Select a phone model :
Model ID :
Image :

How does this example works?

When you select a phone brand from drop down list onChange event gets called onChange=getModel. The getModel function looks like this:

	function getModel()
	{
		var brand = DWRUtil.getValue("brand");
		DWREngine._execute(_cfscriptLocation, null, 'makelookup', brand, getBrandResult);
	}

getModel function first gets the value of brand selected , and then calls DWREngine._execute method which in turn calls makelookup coldfusion function with the parameter as brand code. The DWREngine parameters are explained below:

	_cfscriptLocation -> location of the coldfusion file that has the function implementation
	null, -> Default value
	'makelookup', -> Coldfusion function to be called
	brand -> brand code for which we need the county listing
	getBrandResult, -> Javascript function that will be called after makelookup CF function has been executed

Coldfusion function makelookup takes one argument make and return the array which contains comma delimited model code and mode name for a particular brand, listed below is the CF code:

	<cffunction name="makelookup" hint="type='keyvalue' jsreturn='array'">
		<cfargument name="brand" required="yes" type="string">
		<cfset model = ArrayNew(1)>
		<cfif arguments.brand eq "Nokia">
			<cfset ArrayAppend(model, "10, Nokia 7280")>
			<cfset ArrayAppend(model, "11, Nokia N-Gage")>
			<cfset ArrayAppend(model, "12, Nokia 7270")>
			<cfset ArrayAppend(model, "13, Nokia 7260")>
		<cfelseif arguments.brand eq "Motorolla">
			<cfset ArrayAppend(model, "20,E895")>
			<cfset ArrayAppend(model, "21,Motorolla V8")>
			<cfset ArrayAppend(model, "22,V150")>
			<cfset ArrayAppend(model, "23,Mpx100")>
		<cfelseif arguments.brand eq "Samsung">
			<cfset ArrayAppend(model, "30, Z130")>
			<cfset ArrayAppend(model, "31, Z700")>
			<cfset ArrayAppend(model, "32, X470")>
			<cfset ArrayAppend(model, "33, D488")>
		<cfelse>
			<cfset ArrayAppend(model, "0,Not Available")>
		</cfif>
		<cfreturn model>
	</cffunction>

IMPORTANT If you notice in this function we are using the hint attribute this is specially important when you are passing back an array OR List and want them to be treated as a key value pair in the html page
Below is the explanation of the hint attributes

type='keyvalue' [required]-> Treat the return value of array as a key value pair
jsreturn='array' [optional – 'array' by default] -> return the data back to html page as an array, the other option is to return the values as an object 'object'.
delimiter=',' [optional – ',' by default] -> if you are using some other delimiter other then comma while creating the key pair value you will have to pass that character as the delimiter. example delimiter will be ':' if the array is created like this ArrayAppend(model, "0 | Not Available")

When the coldfusion method returns data, getBrandResult javascript function gets executed with model Array, the model drop down box key and value attributes 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 getBrandResult(modelArray)
	{
		DWRUtil.removeAllOptions("model");
		DWRUtil.addOptions("model", modelArray, "KEY", "VALUE");
		getImageUrl();
	}

Here we are also calling another javascript function getImageUrl which basically calls CF method to get the image associated with phone model. This code/concept is similar to what was used in Text Loading example.