<script type='text/javascript'>_ajaxConfig = {'_cfscriptLocation':'query.cfc', '_jsscriptFolder':'../js'};</script>
<script type='text/javascript' src='../js/ajax.js'></script>

<script type="text/javascript">
	function doQuery(id)	{
		// send data to CF
		DWRUtil.useLoadingMessage();
		DWREngine._execute(_ajaxConfig._cfscriptLocation, null, 'doQuery', id, doQueryResults);
	}
	
	// call back function
	function doQueryResults (r) {
		$('id').innerHTML 		= r.id[0];
		$('fname').innerHTML 	= r.fname[0];
		$('lname').innerHTML 	= r.lname[0];
		$('phone').innerHTML 	= r.phone[0];
		$('location').innerHTML = r.location[0];
	}
	
	function doQueryAndJS(id)	{
		// send data to CF
		DWRUtil.useLoadingMessage();
		DWREngine._execute(_ajaxConfig._cfscriptLocation, null, 'doQueryAndJS', id, doQueryAndJSResults);
	}

	// call back function
	function doQueryAndJSResults (r) {
		// evaluate server side JS
		eval(r);
	}
</script>

	<fieldset>
	<legend>ajaxCFC query retrieval example</legend>
	<label>Select an employee from the list</label><br>
	<select name="employee" size="3" onchange="doQuery(this.value);">
		<option value="1">Rob</option>
		<option value="2">Steve</option>
		<option value="3">John</option>
	</select>
	<select name="employee2" size="3" onchange="doQueryAndJS(this.value);">
		<option value="1">Rob</option>
		<option value="2">Steve</option>
		<option value="3">John</option>
	</select><br>
	Client Side / Server Side
	<br /><br />
	<label>ID:</label> <span id="id"></span><br /><br />
	<label>First Name:</label> <span id="fname"></span><br /><br />
	<label>Last Name:</label> <span id="lname"></span><br /><br />
	<label>Phone Number:</label> <span id="phone"></span><br /><br />
	<label>Location:</label> <span id="location"></span>
	</fieldset>
	

<cfcomponent extends="ajax">
	
	<cfscript>
		// didn't want to rely on a real db, so I defined manually the query here
		variables.q = queryNew('id,fname,lname,phone,location');
		queryAddRow(q,1);
		querySetCell(q, 'id', 1);
		querySetCell(q, 'fname', 'Rob');
		querySetCell(q, 'lname', 'Gonda');
		querySetCell(q, 'phone', '954-555-5555');
		querySetCell(q, 'location', 'Florida');

		queryAddRow(q,1);
		querySetCell(q, 'id', 2);
		querySetCell(q, 'fname', 'Steve');
		querySetCell(q, 'lname', 'Smith');
		querySetCell(q, 'phone', '305-555-5555');
		querySetCell(q, 'location', 'Miami');

		queryAddRow(q,1);
		querySetCell(q, 'id', 3);
		querySetCell(q, 'fname', 'John');
		querySetCell(q, 'lname', 'Dow');
		querySetCell(q, 'phone', '212-555-5555');
		querySetCell(q, 'location', 'New York');
	</cfscript>

	<cffunction name="doQuery" output="no" access="private">
		<cfargument name="uid" type="numeric" required="Yes">>
		
		<cfset var qReturn = '' />
		
		<!--- select from your query --->
		<cfquery name="qReturn" dbtype="query">
			select * from q
			where id = #arguments.uid#
		</cfquery>

		<cfreturn qReturn />
	</cffunction>

	<cffunction name="doQueryAndJS" output="no" access="private">
		<cfargument name="uid" type="numeric" required="Yes">>
		
		<cfset var qReturn = '' />
		<cfset var jsReturn = '' />

		<!--- select from your query --->
		<cfquery name="qReturn" dbtype="query">
			select * from q
			where id = #arguments.uid#
		</cfquery>
		
		<!--- set JS commands to be executed --->
		<cfsavecontent variable="jsReturn"><cfoutput>
			$('id').innerHTML 		= '#JSStringFormat(qReturn.id)#';
			$('fname').innerHTML 	= '#JSStringFormat(qReturn.fname)#';
			$('lname').innerHTML 	= '#JSStringFormat(qReturn.lname)#';
			$('phone').innerHTML 	= '#JSStringFormat(qReturn.phone)#';
			$('location').innerHTML = '#JSStringFormat(qReturn.location)#';
		</cfoutput></cfsavecontent>
		
		<cfreturn jsReturn />
	</cffunction>

</cfcomponent>