Solved

Use two parrs dependent drop down lists in a page

Posted on 2009-03-30
4
159 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Use Case: Protecting a Hybrid Cloud Infrastructure

Microsoft Azure is rapidly becoming the norm in dynamic IT environments. This document describes the challenges that organizations face when protecting data in a hybrid cloud IT environment and presents a use case to demonstrate how Acronis Backup protects all data.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Timer on div 5 24
Problem to copy file 14 53
Jquery driving me nuts... 14 28
selected value 16 26
When it comes to showing a 404 error page to your visitors, you do not want that generic page to show, and you especially do not want your hosting provider’s ad error page to show either. In this article, I will show you how to enable the custom 40…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

733 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