Data-driven related cfselects
I have a page with related selects where I want to pass
User Name (select 1 from a query) > An available date (select 2 from another query) and a hidden field (userID from cfquery in select 2)
all this to an action page for an INSERT.
I couldn't find a way to do this using CFC and I was advised to try JQuery. I couldn't find anything quite like this, but did find the javascript below.
When I tried to adapt it, I found (of course!) that it doesn't work with dynamic values in the selects because I don't have a way of passing an argument, as
I did in the functions in the CFC.
Is there a way to relate dynamically populated CFSELECTS using javascript (maybe JQuery)? So that I can control what's going on right on my page, instead of
leaving it up to the CF server?
http://snipplr.com/view/26338/cascading-select-boxes/
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" defer="defer">
function cascadeSelect(parent, child){
var childOptions = child.find('option:not(.static)');
child.data('options',childOptions);
parent.change(function(){
childOptions.remove();
child
.append(child.data('options').filter('.sub_' + this.value))
.change();
})
childOptions.not('.static, .sub_' + parent.val()).remove();
}
$(function(){
cascadeForm = $('.cascadeTest');
orgSelect = cascadeForm.find('.orgSelect');
terrSelect = cascadeForm.find('.terrSelect');
locSelect = cascadeForm.find('.locSelect');
cascadeSelect(orgSelect, terrSelect);
cascadeSelect(terrSelect, locSelect);
});
</script>
******************************* For reference, here's the CFC I tried earlier. ************************************
And actually, I had to change the returntype from "array" to "query" in order to pass both the
ModelSelected and the Session_Date. I couldn't find a way to pass Emp_Id, which is why I'm
looking at a javascript or JQuery solution.
<cfcomponent output="false">
<cfset THIS.dsn="cf_01">
<!--- Get array of names --->
<cffunction name="getNames" 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 Name, SelectionDate, Emp_Id, ModelSelected
FROM Laptop_Selection
ORDER BY Name
</cfquery>
<!--- Convert results to array --->
<cfloop index="i" from="1" to="#data.RecordCount#">
<cfset result[1]=data.ModelSelected>
<cfset result[2]=data.Name>
</cfloop>
<!--- And return it --->
<cfreturn result>
</cffunction>
<!--- Get dates by model number --->
<cffunction name="getDates" access="remote" returntype="query">
<cfargument name="ModelSelected" type="string" 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 Session_Date, Emp_Id
FROM Laptop_Rollout
WHERE Session_Name= '#ARGUMENTS.ModelSelected#'
ORDER BY Session_Date
</cfquery>
<cfset SESSION.EmpID=data.Emp_Id>
<!--- Convert results to array --->
<!---
<cfloop index="i" from="1" to="#data.RecordCount#">
<cfset result[1]=data.Emp_Id>
<cfset result[2]=data.Session_Date>
</cfloop>
<!--- And return it --->
<cfreturn result>
--->
<cfreturn data>
</cffunction>
</cfcomponent>
AdChoices