CFAjax

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

Zip Lookup

Example This example takes a zip code and returns city and state associated with it, since this is a demo example, not all the zip code can be used, below is the list of zip code that can be used for testing
22033 30004 92121

Zip Code :
City :
State :

How does this example works?

When you enter the zip code and press tab or change the focus from zipcode field onChange event gets called onChange=getCityAndState. The getCityAndState function looks like this:

	function getCityAndState()
	{
		var zipcode = DWRUtil.getValue("zipcode");
		DWREngine._execute(_cfscriptLocation, null, 'ziplookup', zipcode, getCityAndStateResult);
	}

getCityAndState function first gets the zipcode value, and then calls DWREngine._execute method which in turn calls ziplookup coldfusion function with the parameter as zipcode. The DWREngine parameters are explained below:

	_cfscriptLocation -> location of the coldfusion file that has the function implementation
	null, -> Default value
	'ziplookup', -> Coldfusion function to be called
	zipcode -> zipcode for which we need the city and state
	getCityAndStateResult, -> Javascript function that will be called after ziplookup CF function has been executed

Coldfusion function ziplookup takes one argument state and return the coldfusion object which contains city and state information, listed below is the CF code:

	<cffunction name="ziplookup">
		<cfargument name="zipCode" required="yes" type="string">
		<cfset object = CreateObject("Component","cfobject")>
		<cfif arguments.zipCode eq "22033">
			<cfset object.city = "Fairfax">
			<cfset object.state = "VA">
		<cfelseif arguments.zipCode eq "30004">
			<cfset object.city = "Alpharetta">
			<cfset object.state = "GA">
		<cfelseif arguments.zipCode eq "92121">
			<cfset object.city = "San Diego">
			<cfset object.state = "CA">
		<cfelse>
			<cfset object.city = "Not in Database">
			<cfset object.state = "NA">
		</cfif>
		<cfreturn object>
	</cffunction>

When the coldfusion method returns data, getCityAndStateResult javascript function gets executed with addresObject which contains city and state information, the form field values are filled using the DWRUtil.setValue method from utils.js:

	function getCityAndStateResult(addressObject)
	{
		DWRUtil.setValue("city", addressObject.CITY);
		DWRUtil.setValue("state", addressObject.STATE);
	}