Solved

Use two parrs dependent drop down lists in a page

Posted on 2009-03-30
4
157 Views
Last Modified: 2013-12-24
<script type="text/javascript" src="../js/engine_micro.js"></script>
<cfinvoke component="com.getmodell" method="getHersteller" returnvariable="qHersteller">
</cfinvoke>
<cfinvoke component="com.getmodell2" method="getHersteller2" returnvariable="qHersteller2">
</cfinvoke>
<script type="text/javascript" src="js/engine_micro.js"></script>
<script language="javascript" type="text/javascript">
function getOptions(ID){
 //set the params required for your function
 if (isNaN(ID) || ID <= 0) ID = 0;
 var param = 'herstellerid='+ID;
 http('POST','com/getmodell.cfc?method=getMenu',showNewOptions_response,param);
}
function showNewOptions_response(obj){
 var mySelect = document.getElementById('S_Modell_ID');
 mySelect.options.length = 0;
 for (var c = 0; c < obj.modell_id.length; c++)
 {
  //note that jsmx calls always return lower case
  mySelect.options[c] = new Option(obj.modell_de[c] , obj.modell_id[c]);
 }      
}
</script>
<script language="javascript" type="text/javascript">
function getOptions(ID){
 //set the params required for your function
 if (isNaN(ID) || ID <= 0) ID = 0;
 var param = 'herstellerid='+ID;
 http('POST','com/getmodell2.cfc?method=getMenu2',showNewOptions_response,param);
}
function showNewOptions_response(obj){
 var mySelect = document.getElementById('S_Modell_ID2');
 mySelect.options.length = 0;
 for (var c = 0; c < obj.modell_id.length; c++)
 {
  //note that jsmx calls always return lower case
  mySelect.options[c] = new Option(obj.modell_de[c] , obj.modell_id[c]);
 }      
}
</script>
<cfparam name="FORM.MAINSELECT" default="">
 
<cfform action="selectajax.cfm" method="get" name="WADASearchForm" id="WADASearchForm">
<!--- this is the primary select, which controls the other one --->
<cfselect name="S_Hersteller_ID"  onchange="getOptions(this.value);">
<option value="" <cfif Form.mainselect EQ "">selected="selected"</cfif>>beliebig</option>
<cfoutput query="qHersteller">
<option value="#Hersteller_ID#" <cfif qHersteller.Hersteller_ID EQ Form.mainselect>selected="selected"</cfif>>#Hersteller_Text#</option>
</cfoutput>
</cfselect>
 
<!--- this is the secondary select, which is changed by the AJAX code --->
<cfselect name="S_Modell_ID" id="S_Modell_ID">
<option value="" selected="selected">Please select a Make first...</option>
</cfselect>
<input name="Search" type="image" class="imageSuchen" id="Search" value="Search" src="../images/search.gif" alt="Search"  />
</cfform><br /><br />
<!--- this is the second primary select, which controls the other one --->
 <cfselect name="S_Hersteller_ID2" class="selectleftbig" id="S_Hersteller_ID2" onchange="getOptions(this.value);">
                       <option value="">beliebig</option>
                         <cfoutput query="qHersteller2">
                                <option value="#qHersteller2.Hersteller_ID#" >#qHersteller2.Hersteller_Text#</option>
                             </cfoutput>
                           </cfselect>
                           <br /><br />
      <cfselect name="S_Modell_ID2" id="S_Modell_ID2" class="selectleftbig">
<option value="" selected="selected">Erst Hersteller w&auml;hlen</option>
</cfselect>
and the two cfc:
<cfcomponent output="false">
 <cffunction name="getHersteller" returntype="query">
  <cfset VAR qHersteller = "">
  <cfquery name="qHersteller" datasource="#request.dsn#">
  SELECT Hersteller_ID, Hersteller_Text
  FROM Hersteller
  WHERE Mobiles_Subs_ID = <cfqueryparam cfsqltype="cf_sql_numeric" value="1">
  ORDER BY Hersteller_NR
  </cfquery>
  <cfreturn qhersteller>
</cffunction>
 
 <cffunction name="GetMenu" access="remote" output="false" returntype="query" hint="Returns a query of the submenu items based on the parent menu ID">
  <cfargument name="herstellerid" required="yes" type="numeric" hint="The parent ID of the items to return">
  <cfset var QGetMenu="">
  <cfquery datasource="#request.dsn#" name="QGetMenu">
  SELECT Modell_DE, Modell_ID
  FROM Modell_Auto_S
  WHERE Auto_ID = <cfqueryparam cfsqltype="cf_sql_numeric" value="#ARGUMENTS.herstellerid#">
  ORDER BY Modell_NR
  </cfquery>
  <cfreturn QGetMenu>
 </cffunction>
</cfcomponent>
And getmodell2:
<cfcomponent output="false">
 <cffunction name="getHersteller2" returntype="query">
  <cfset VAR qHersteller2 = "">
  <cfquery name="qHersteller2" datasource="#request.dsn#">
  SELECT Hersteller_ID, Hersteller_Text
  FROM Hersteller
  WHERE Mobiles_Subs_ID = <cfqueryparam cfsqltype="cf_sql_numeric" value="1">
  ORDER BY Hersteller_NR
  </cfquery>
  <cfreturn qhersteller2>
</cffunction>
 
 <cffunction name="GetMenu2" access="remote" output="false" returntype="query" hint="Returns a query of the submenu items based on the parent menu ID">
  <cfargument name="herstellerid" required="yes" type="numeric" hint="The parent ID of the items to return">
  <cfset var QGetMenu2="">
  <cfquery datasource="#request.dsn#" name="QGetMenu2">
  SELECT Modell_DE, Modell_ID
  FROM Modell_Auto_S
  WHERE Auto_ID = <cfqueryparam cfsqltype="cf_sql_numeric" value="#ARGUMENTS.herstellerid#">
  ORDER BY Modell_NR
  </cfquery>
  <cfreturn QGetMenu2>
 </cffunction>
</cfcomponent>

But i suppose as i use for both the same function the scripts do not work fine.
Any help to solve this?
0
Comment
Question by:Panos
  • 3
4 Comments
 
LVL 27

Accepted Solution

by:
azadisaryev earned 500 total points
ID: 24019935
it would not work because your second set of js functions overwrites the first set: you still only have ONE getOptions and ONE showNewOptions_response function that will be called from both your cfselects

you need to create a separate set of js functions for your second related selects set, making sure the functions are NOT named the same as in the first set.

Azadi
0
 
LVL 2

Author Comment

by:Panos
ID: 24019962
Ok azadi
Can youmake the changes in the second javascript file?
<script language="javascript" type="text/javascript">
function getOptions(ID){
 //set the params required for your function
 if (isNaN(ID) || ID <= 0) ID = 0;
 var param = 'herstellerid='+ID;
 http('POST','com/getmodell2.cfc?method=getMenu2',showNewOptions_response,param);
}
function showNewOptions_response(obj){
 var mySelect = document.getElementById('S_Modell_ID2');
 mySelect.options.length = 0;
 for (var c = 0; c < obj.modell_id.length; c++)
 {
  //note that jsmx calls always return lower case
  mySelect.options[c] = new Option(obj.modell_de[c] , obj.modell_id[c]);
 }      
}
</script>
0
 
LVL 2

Author Comment

by:Panos
ID: 24019979
ok i made it
Thank you
0
 
LVL 2

Author Closing Comment

by:Panos
ID: 31564366
Thank you again
It was easier than i thought
0

Featured Post

The Eight Noble Truths of Backup and Recovery

How can IT departments tackle the challenges of a Big Data world? This white paper provides a roadmap to success and helps companies ensure that all their data is safe and secure, no matter if it resides on-premise with physical or virtual machines or in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question