Thread: Help with using Ajax with CF8

Hi,

I am new to the Ajax movement and would appreciate it if someone could let me know how I can enable Cf8 Ajax tags to work.
The reason I am asking this is because I have just downloaded the Dev version of CF8 and tried to run the code below that was found in a CF8 Ajax tutorial but I just cannot get the related dropdowns to work. It does not show any error messages. All It shows now is:

Select County : [Empty Select Box here]
Select City : [Empty Select Box here]

I wanted the code below to self populate the "Select Country" drop down box with all the Countries in the tCountry Table in the database, and than once the user picks a Country, the bottom Select City Drop down box will show all the States in the tState Table.

Does my CF8 Install not have Ajax working or am I doing something wrong? Thanks for your kind assistance.

This is the code that I have written to a .cfc file named Admin.cfc:

<cfcomponent output="false">

<!--- Get array of County Names --->
<cffunction name="getCountry" access="remote" returnType="array">
<!--- Define variables --->
<cfset var data="">
<cfset var result=ArrayNew(2)>
<cfset var i=0>

<!--- Get data --->
<cfquery name="data" datasource="#ds#">
SELECT nCountry_ID, sCountry_Name
FROM tCountry
ORDER BY sCountry_Name
</cfquery>

<!--- Convert results to array --->
<cfloop index="i" from="1" to="#data.RecordCount#">
<cfset result[i][1]=data.nCountry_ID[i]>
<cfset result[i][2]=data.sCountry_Name[i]>
</cfloop>

<!--- And return it --->
<cfreturn result>
</cffunction>


<!--- Get State--->
<cffunction name="getState" access="remote" returnType="array">
<cfargument name="nCountry_ID" type="numeric" required="true">

<!--- Define variables --->
<cfset var data="">
<cfset var result=ArrayNew(2)>
<cfset var i=0>

<!--- Get data --->
<cfquery name="data" datasource="#ds#">
SELECT nState_ID, sState_Name
FROM tCity
WHERE nCountry_ID = #ARGUMENTS.nCountry_ID#
ORDER BY sState_Name
</cfquery>

<!--- Convert results to array --->
<cfloop index="i" from="1" to="#data.RecordCount#">
<cfset result[i][1]=data.nState_ID[i]>
<cfset result[i][2]=data.sState_Name[i]>
</cfloop>

<!--- And return it --->
<cfreturn result>
</cffunction>

</cfcomponent>

This is the form in the .cfm file.

<cfform>

<table>
<tr>
<td>Select Country:</td>
<td><cfselect name="nCountry_ID"
bind="cfc:Admin.getCountry()"
bindonload="true" /></td>
</tr>
<tr>
<td>Select State:</td>
<td><cfselect name="nState_ID"
bind="cfc:Admin.getState({nCountry_ID})" /></td>
</tr>
</table>

</cfform>

When I was first starting out doing Ajax through CF I kept running into problems for two reasons:

1. My application.cfm was outputing some HTML which was interfering with the XML that the CFC was supposed to return. Make sure you don't have anything like that going on -- maybe call the CFC directly and view source to make sure that extra characters aren't being returned.

2. The return type was not the same as what was expected. I needed to return JSON (I forget what the default is).