Many of us have built related select controls, forms with two (or more) drop down <SELECT> controls, where making a change in one control causes the available selections in the related control to change. For example, selecting a category in one control displays category products in a related control, or selecting a state in one control updates a related control with the cities in that state.
These controls are typically implemented using client side JavaScript to process arrays of data embedded in the page itself. Every possible combination and option is embedded in JavaScript in the page, and client side scripts update controls based on selection changes in other controls.
ColdFusion 8's new Ajax functionality makes this kind of interface really easy, without requiring any client-side scripting, and without requiring that all of the data be embedded in the generated page. Rather, <CFSELECT> controls may be bound to ColdFusion Component methods that are asynchronously invoked as needed.
To demonstrate this, here is a complete working example which uses one of the example databases that comes with ColdFusion. First the ColdFusion Component:
<cfcomponent output="false">
<cfset THIS.dsn="cfartgallery">
<!--- Get array of media types --->
<cffunction name="getMedia" access="remote" returnType="array">
<!--- Define variables --->
<cfset var data="">
<cfset var result=ArrayNew(2)>
<cfset var i=0>
<!--- Get data --->
<cfquery name="data" datasource="#THIS.dsn#">
SELECT mediaid, mediatype
FROM media
ORDER BY mediatype
</cfquery>
<!--- Convert results to array --->
<cfloop index="i" from="1" to="#data.RecordCount#">
<cfset result[i][1]=data.mediaid[i]>
<cfset result[i][2]=data.mediatype[i]>
</cfloop>
<!--- And return it --->
<cfreturn result>
</cffunction>
<!--- Get art by media type --->
<cffunction name="getArt" access="remote" returnType="array">
<cfargument name="mediaid" type="numeric" required="true">
<!--- Define variables --->
<cfset var data="">
<cfset var result=ArrayNew(2)>
<cfset var i=0>
<!--- Get data --->
<cfquery name="data" datasource="#THIS.dsn#">
SELECT artid, artname
FROM art
WHERE mediaid = #ARGUMENTS.mediaid#
ORDER BY artname
</cfquery>
<!--- Convert results to array --->
<cfloop index="i" from="1" to="#data.RecordCount#">
<cfset result[i][1]=data.artid[i]>
<cfset result[i][2]=data.artname[i]>
</cfloop>
<!--- And return it --->
<cfreturn result>
</cffunction>
</cfcomponent>
This CFC contains two methods. getMedia returns all of the media types in the art catalog database, and getArt accepts a media id and returns any art that is associated with that passed id. Both methods convert their results into two dimensional arrays, with the first dimension containing the id (to be used as the value in the <SELECT> control) and the second containing the display text. (For now, this two dimensional array is the format required by <CFSELECT>).
Now for the form itself:
<cfform>
<table>
<tr>
<td>Select Media Type:</td>
<td><cfselect name="mediaid"
bind="cfc:art.getMedia()"
bindonload="true" /></td>
</tr>
<tr>
<td>Select Art:</td>
<td><cfselect name="artid"
bind="cfc:art.getArt({mediaid})" /></td>
</tr>
</table>
</cfform>
The form contains two <CFSELECT> controls, one named "mediaid" and the other named "artid".
"mediaid" is bound to cfc:art.getMedia(), and so to obtain the list of media types to populate the control, the client makes an asynchronous call to the getMedia method in art.cfc, and populates the list with the returned array. As we'd want this control to be automatically populated when the form loads, bindonload is set to "true", this way the getMedia() call is fired automatically at form load time.
"artid" is bound to the getArt method in art.cfc. This method requires that a mediaid be passed to it, and so {mediaid} is used so as to pass the currently selected value of control mediaid (the first <CFSELECT>). Because these two controls are bound together, the second dependant on the first, ColdFusion automatically generates JavaScript code that forces artid to be repopulated with newly retrieved data whenever mediaid changes.
This example binds just two controls, but this mechanism can be used to relate as many controls as needed, and not just <CFSELECT> controls either.
To start, can you default to a generic entry at the top of your list so nothing is loaded until a selection is made?
Also, if you have database queries to get this data, do what you can to speed them up. Dont use SELECT * when you can use SELECT id,name.
Good luck, hope some of this helps.
<cfselect name="region_name"
bind="url:region_district_store.cfc?method=getRegion&returnFormat=json®ion_x=#region#"
bindonload="true" />
<cfselect name="district_name"
bind="url:region_district_store.cfc?method=getDistrict&returnFormat=json®ion_x={region_name.value}&district_x=#district#"
bindonload="false" />
<cfselect name="store_name"
bind="url:region_district_store.cfc?method=getStore&returnFormat=json®ion_x={region_name.value}&district_x={district_name.value}&store_x=#store#"
bindonload="false" />
It seems to be finding my /includes/art.cfc file no problem but can't run the query. I'm stuck without some help.
How can I set the encoding?
I have two related drop down boxes:
<cfselect name="code" bind="cfc:questdata.getcats()" bindonload="true" />
<cfselect name="name" bind="cfc:questdata.getoptions({code})" />
<cfinput type="submit" name="find" value="Find your quest now!">
I have not changed this code since I first put it up there and all of a sudden in IE the boxes are empty and I get this error 'Coldfusion' is undefined.
Has there been some change the to libraries? can someone suggest something? Help!
Do you know if this works with CF7?
downs to populate.
I would recommend returning the data a a json object in the bind:
bind="url:#cfc_dirctory#/art.cfc?method=getMedia&returnFormat=json&mediaid=#mediaid#"
it makes the build time on the dropdowns lighting fast.
I have in my form 3 cfselects. The second and third populate depending on whatever has been selected on the first one. So far so good.
This is for my "Add project" screen. Now, if I need to edit the project, I couldn't figure out yet how to select on the cfselects the info from the database but providing still the functionality of the "related" selects. In other words, if I need to modify the information on the second cfselect, it will still show me the options based on what the first cfselect retrieved from the database.
Could someone help me? Ben? Ray? Anybody?
Thanks a lot.
Dani
<cfselect name="nfgCliID"
bind="cfc:collection.getCompany()"
bindonload="true">
<option selected><cfoutput query="myQuery">#myCompany#</cfoutput></option>
</cfselect>
</td>
Select nfgCliID, myCompany
then you shouldn' need to use:
<option selected><cfoutput query="myQuery">#myCompany#</cfoutput></option>
What the cachedwithin will do? Also, in which of my queries should it go? I have the first query to select the company the second to select the contact at that company and the third to select the projects for that company. Thanks for all the help by the way.
cachedWithin (optional) Timespan, using the CreateTimeSpan function. If original query date falls within the time span, cached query data is used. CreateTimeSpan defines a period from the present, back. Takes effect only if query caching is enabled in the Administrator.
To use cached data, the current query must use the same SQL statement, data source, query name, user name, and password.
I have problem of similar kind with the cfselect not working with bind attribute.
The bind attribute is working properly in localhost but when uploaded to server the bind attribute is not working properly. I have application.cfc in my application however i also user this line of code "<cfcontent type="text/html" reset="yes">" at starting inside the function in cfcomponent.
The strange thing which i observed is when commented the cfc completely then I dont see any error dislpaying which is unusal( where an error is expected in normal case). But In my localhost I can see an error as expected.