bind to a select with jquery and coldfusion
Recently I wanted to be able to bind the options of a select to the selection made in another select field in a form. I know this is possible in CF8+ as an attribute of the cfselect tag but I wanted to be able to do this on CF7 as well as Railo 3.1 so I started to look around the internet for possible solutions. Upon looking on the railo mailing list I found some direction by a post from Raymond Camden on his ColdFusion Jedi blog. I also briefly looked at the cfajax implementation in the works but decided to stick with jquery. This example got me really close to what I wanted but I still wanted to be able to keep the correct value selected when the page reloaded after submiting the form. It appears that is an issue with the cfselect binding built into ColdFusion 8 and 9 but someone can correct me on this.
In this example I will have a select control that allows me to select a season for sports and then a second select that will list the sports available in that season. If the users selects Winter in the first select and then hockey in the second select and submits the form both of those values should be selected when the form reloads.
Here is a breakdown of what I came up with:
First, my code to set the session variables in example.cfm:
<cfparam name="SESSION.views.event" type="string" default="0">
<cfif ISdefined('FORM.cats')>
<cfset SESSION.views.cat = FORM.cats>
<cfset SESSION.views.event = FORM.events>
</cfif>
Next, the head section which loads the required libraries for the example. Note the loading of the jquery selectboxes plugin.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<invalidTag http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>bind to a select with jquery and coldfusion example</title>
<invalidTag src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<invalidTag src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<invalidTag src="/jps/scripts/jquery/selectboxes_7/jquery.selectboxes.js"></script>
</head>
Sample query data for the "category" select in example.cfm:
<cfset queryAddRow(getcats, 3)>
<cfset getcats["id"][1] = 1>
<cfset getcats["category"][1] = "Winter">
<cfset getcats["id"][2] = 2>
<cfset getcats["category"][2] = "Summer">
<cfset getcats["id"][3] = 3>
<cfset getcats["category"][3] = "Spring">
The form used in example.cfm:
<div>
<cfselect name="cats" query="getcats" display="category" value="id" queryposition="below" selected="#SESSION.views.cat#" id="cats">
<option value="">View All</option>
</cfselect>
<select name="events" id="views" onchange="this.form.submit();">
</select>
The javascript used to load the proper items into the select. This first section listens for the vategory select to change values and populates the events drop down based on the selected value:
var Options = {
"" : "View All"
}
$(function(){
$("select#cats").change(function() {
//remove exisiting options
$("#views").removeOption(/./);
$.getJSON('query_example.cfm', {id: $("#cats").val()}, function(d) {
for(var i=0; i<d.DATA.length; i++) {
$("#views").addOption(d.DATA[i][0], d.DATA[i][1]);
<cfoutput>
$("##views").val("");
</cfoutput>
}
});
}
)
}
)
And then this section that selects the correct value after the page loads:
//hard coded option
$("#views").addOption(Options, false);
$.getJSON('query_example.cfm', {id: $("#cats").val()}, function(d) {
for(var i=0; i<d.DATA.length; i++) {
$("#views").addOption(d.DATA[i][0], d.DATA[i][1], false);
<cfoutput>
$("##views").val("#SESSION.views.event#");
</cfoutput>
}
});
}
)
</script>
And finally the submit button in the form and the end of the form in example.cfm.
</div>
</cfform>
You will notice that both sections of the script call query_example.cfm to get the id value of the "categories" select box. Here is the example code in the query_example.cfm file:
<cfset getevents = queryNew("id,event")>
<cfset queryAddRow(getevents, 2)>
<cfset getevents["id"][1] = 1>
<cfset getevents["event"][1] = "Hockey">
<cfset getevents["id"][2] = 2>
<cfset getevents["event"][2] = "Football">
<cfelseif url.id IS 2>
<cfset getevents = queryNew("id,event")>
<cfset queryAddRow(getevents, 2)>
<cfset getevents["id"][1] = 1>
<cfset getevents["event"][1] = "Baseball">
<cfset getevents["id"][2] = 2>
<cfset getevents["event"][2] = "Soccer">
<cfelseif url.id IS 3>
<cfset getevents = queryNew("id,event")>
<cfset queryAddRow(getevents, 2)>
<cfset getevents["id"][1] = 1>
<cfset getevents["event"][1] = "Swimming">
<cfset getevents["id"][2] = 2>
<cfset getevents["event"][2] = "Wrestling">
<cfelse>
<cfset getevents = queryNew("id,event")>
<cfset queryAddRow(getevents, 1)>
<cfset getevents["id"][1] = "">
<cfset getevents["event"][1] = "View All">
</cfif>
<cfset d = serializeJSON(getevents)>
<cfcontent type="application/json" reset="true"><cfoutput>#d#</cfoutput>
You can download all of the sample files here.