jquery-select-manipulation and coldfusion

Hello experts.
On this page :http://websitebuildersresource.com/2009/02/07/jquery-select-manipulation-multiple-selects-json-default/ i found a tutorial jquery-select-manipulation and php.How can i use this with coldfusion?
(My cfc for the two select boxes is:
<cfcomponent output="false">
 <cffunction name="GetHersteller" access="remote" returnType="query">
  <cfargument name="vlangid" required="no" type="string" default="de">
  <cfset var data="">
     <cfquery name="data" datasource="#request.dsn#" dbtype="query">
     SELECT Hersteller_ID, Hersteller_Text
     FROM Hersteller
     WHERE
     Mobiles_Subs_ID = <cfqueryparam cfsqltype="cf_sql_numeric" value="1">
     OR (Hersteller_ID = <cfqueryparam cfsqltype="cf_sql_integer" value="19999">
     AND LANGID = <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.vlangid#"> )
     OR      (Hersteller_NR = <cfqueryparam cfsqltype="cf_sql_integer" value="-1">
     AND LANGID = <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.vlangid#"> )
     ORDER BY Hersteller_NR
     </cfquery>
  <cfreturn data>
 </cffunction>

 <cffunction name="GetMenu" access="remote" returnType="query">
   <cfargument name="Hersteller_ID" type="any" required="true">
   <cfset var data="">
     <cfif ARGUMENTS.Hersteller_ID NEQ "">
       <cfquery name="data" datasource="#request.dsn#">
        SELECT Auto_ID,Modell_DE, Modell_ID
        FROM Modell_Auto_S
        WHERE Auto_ID = #ARGUMENTS.Hersteller_ID#
        ORDER BY Modell_NR
        </cfquery>
      </cfif>
     <cfreturn data>
    </cffunction>
</cfcomponent>
LVL 2
PanosAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Pravin AsarPrincipal Systems EngineerCommented:
What I understand from you post is :

You are wondering how to populate and manage linked Select/ComboBox elements ?

Am I right ?

Which version of Coldfusion do you use ?

CF8 Ajax is one possibility.

Please clarify .


0
PanosAuthor Commented:
Hi pravinasar
I have allready two working codes for related select boxes (look here:http://www.experts-exchange.com/Software/Server_Software/Web_Servers/ColdFusion/Q_24565354.html).
The problem i have is to get the default values (or the values i have selected after the  form submiting).On the tutorial with jquery it seems that there is a way to get these values and because i use jquery to manage other things i was wondering if it was a good idea to use this tutorial with coldfusion.
0
Pravin AsarPrincipal Systems EngineerCommented:
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

PanosAuthor Commented:
Hi pravinasar:
It would be more helpful for me to look at a tutorial so that i can better understand it because my english is not the best.
Can you help me a little more?
0
Pravin AsarPrincipal Systems EngineerCommented:
Here is code using cfajaxproxy which let you set default value [and get the value of selected form fields]



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Ajax</title>
</head>
 
<body>
<!--- Set the default Value --->
<cfset defaultmodule = 2>
 
<!---
 Form was posted, so get the value of desired field(s).
--->
<cfif IsDefined("FORM.module")>
	<cfset defaultmodule = #FORM.Module#>
</cfif>
 
<script type="text/javascript">
var imdone = false;
function SelectDefault(x,val) {
 if(!imdone) {
  var dd = document.getElementById('module');
  for(var i = 0; i < dd.length; i++){
   if(dd.options[i].value == val){
    dd.selectedIndex = i;
   }
  }
  imdone = true;
 }
}
</script>
 
<!--- Proxy function --->
<cfajaxproxy bind="javascript:SelectDefault({module},#defaultmodule#)">
 
<cfform name="myform" method="post">
<cfselect name="module" id="module" value="ModuleID" display="ModuleName"
 bindonload="true" bind="cfc:Modules.GetModules()"/>
 
<cfselect name="submoduleid" id="submoduleid" value="SubModuleId" display="SubModuleName" 
bind="cfc:Modules.GetSubModules({module})"/>
<cfinput type="submit" name="submit" value="Submit"/>
</cfform>
</body>
</html>
 
 
 
 
My CFC Codes is like 
 
<cfcomponent output="no">
	<cffunction name="GetModules" access="remote" returntype="query">
        <cfquery name="data" datasource="VXSQL">
     		SELECT ModuleId, ModuleName from tblModules
     		WHERE IsActive = 1
     		ORDER BY ModuleName
     	</cfquery>
		<cfreturn data>
	</cffunction>
	<cffunction name="GetSubModules" access="remote" returntype="query">
		<cfargument name="moduleId">
        <cfquery name="data" datasource="VXSQL">
     		SELECT SubModuleId, SubModuleName from tblSubModules
     		WHERE IsActive = 1 AND ModuleId = #arguments.moduleid#
     		ORDER BY SubModuleName
     	</cfquery>
		<cfreturn data>
	</cffunction>
</cfcomponent>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
PanosAuthor Commented:
Hi again.
Thank yous so far.I'm very close to have the comlete solution.
I tried to use your code.It did work for one select and i tried than to use the cfajaxproxy for the child select box but when i have selected a value except the default value (select all with value '') it does not work.
I send you the cfm and cfc to take a look.Notice that Modell_ID IS NOT A number but Text.(may be there is the problem.)
cfm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7" />
<title>Untitled Document</title>
<cfset defaultHersteller_ID = 2>
 
<!---
 Form was posted, so get the value of desired field(s).
--->
<cfif IsDefined("FORM.Hersteller_ID")>
        <cfset defaultHersteller_ID = #FORM.Hersteller_ID#>
</cfif>
 
<script type="text/javascript">
var imdone = false;
function SelectDefault(x,val) {
 if(!imdone) {
  var dd = document.getElementById('Hersteller_ID');
  for(var i = 0; i < dd.length; i++){
   if(dd.options[i].value == val){
    dd.selectedIndex = i;
   }
  }
  imdone = true;
 }
}
</script>
<cfset defaultModell_ID = ''> 
<cfif IsDefined("FORM.Modell_ID")>
        <cfset defaultModell_ID = #FORM.Modell_ID#>
</cfif>
 
<script type="text/javascript">
var imdone = false;
function SelectsecondDefault(x,val) {
 if(!imdone) {
  var dd = document.getElementById('Modell_ID');
  for(var i = 0; i < dd.length; i++){
   if(dd.options[i].value == val){
    dd.selectedIndex = i;
   }
  }
  imdone = true;
 }
}
</script>
</head>
 
<body>
<!--- Proxy function --->
<cfajaxproxy bind="javascript:SelectDefault({Hersteller_ID},#defaultHersteller_ID#)">
<cfajaxproxy bind="javascript:SelectsecondDefault({Modell_ID},#defaultModell_ID#)">
<cfform  action="#cgi.SCRIPT_NAME#" method="post" name="Localiza" preservedata="yes">
<table>
<tr>
<td width="100">Division:</td>
<td width="150">
<cfselect name="Hersteller_ID" 
          id="Hersteller_ID"
          bind="cfc:testselect6.GetHersteller()"
		  display="Hersteller_Text" 
          value="Hersteller_ID" 
          BindOnLoad="true"
          />
        </td>
   </tr>
<tr>
<td width="100">State:</td>
<td width="150">
<cfselect name="Modell_ID" 
          id="Modell_ID"
          bind="cfc:testselect6.GetMenu({Hersteller_ID})"
		  display="Modell_DE" 
          value="Modell_ID"/>
          </td>
       </tr>
 
</table>
<input name="" type="submit" />
</cfform>
</body>
</html>
 
cfc:
<cfcomponent output="false">
 <cffunction name="GetHersteller" access="remote" returnType="query">
  <cfargument name="vlangid" required="no" type="string" default="de">
  <cfset var data="">
     <cfquery name="data" datasource="#request.dsn#" dbtype="query">
     SELECT Hersteller_ID, Hersteller_Text
     FROM Hersteller
     WHERE 
     Mobiles_Subs_ID = <cfqueryparam cfsqltype="cf_sql_numeric" value="1">
     OR (Hersteller_ID = <cfqueryparam cfsqltype="cf_sql_integer" value="19999">
     AND LANGID = <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.vlangid#"> )
     OR	(Hersteller_NR = <cfqueryparam cfsqltype="cf_sql_integer" value="-1">
     AND LANGID = <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.vlangid#"> )
     ORDER BY Hersteller_NR
     </cfquery>
  <cfreturn data>
 </cffunction>
 
 <cffunction name="GetMenu" access="remote" returnType="query">
   <cfargument name="Hersteller_ID" type="any" required="true">
   <cfset var data="">
     <cfif ARGUMENTS.Hersteller_ID NEQ "">
       <cfquery name="data" datasource="#request.dsn#">
        SELECT Auto_ID,Modell_DE, Modell_ID
        FROM Modell_Auto_S
        WHERE Auto_ID = #ARGUMENTS.Hersteller_ID#
        ORDER BY Modell_NR
        </cfquery>
        <cfelse>
    	<cfquery name="data" datasource="#request.dsn#">
        SELECT Auto_ID,Modell_DE, Modell_ID
        FROM Modell_Auto_S
        WHERE Modell_NR = <cfqueryparam cfsqltype="cf_sql_numeric" value="20000">
        </cfquery>
      </cfif>
     <cfreturn data>
    </cffunction>
</cfcomponent>

Open in new window

0
PanosAuthor Commented:
Hi again.
Thank you so far.I'm very near to have the complete solution.
I tried to use your code.It did work for one select and i tried  to use the cfajaxproxy for the child select box too but when i  select a value except the default value ("select all" with value '') it does not work.
I send you the cfm and cfc to take a look.Notice that Modell_ID IS NOT A number but Text.(may be there is the problem.)
cfm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7" />
<title>Untitled Document</title>
<cfset defaultHersteller_ID = 2>
 
<!---
 Form was posted, so get the value of desired field(s).
--->
<cfif IsDefined("FORM.Hersteller_ID")>
        <cfset defaultHersteller_ID = #FORM.Hersteller_ID#>
</cfif>
 
<script type="text/javascript">
var imdone = false;
function SelectDefault(x,val) {
 if(!imdone) {
  var dd = document.getElementById('Hersteller_ID');
  for(var i = 0; i < dd.length; i++){
   if(dd.options[i].value == val){
    dd.selectedIndex = i;
   }
  }
  imdone = true;
 }
}
</script>
<cfset defaultModell_ID = ''> 
<cfif IsDefined("FORM.Modell_ID")>
        <cfset defaultModell_ID = #FORM.Modell_ID#>
</cfif>
 
<script type="text/javascript">
var imdone = false;
function SelectsecondDefault(x,val) {
 if(!imdone) {
  var dd = document.getElementById('Modell_ID');
  for(var i = 0; i < dd.length; i++){
   if(dd.options[i].value == val){
    dd.selectedIndex = i;
   }
  }
  imdone = true;
 }
}
</script>
</head>
 
<body>
<!--- Proxy function --->
<cfajaxproxy bind="javascript:SelectDefault({Hersteller_ID},#defaultHersteller_ID#)">
<cfajaxproxy bind="javascript:SelectsecondDefault({Modell_ID},#defaultModell_ID#)">
<cfform  action="#cgi.SCRIPT_NAME#" method="post" name="Localiza" preservedata="yes">
<table>
<tr>
<td width="100">Division:</td>
<td width="150">
<cfselect name="Hersteller_ID" 
          id="Hersteller_ID"
          bind="cfc:testselect6.GetHersteller()"
		  display="Hersteller_Text" 
          value="Hersteller_ID" 
          BindOnLoad="true"
          />
        </td>
   </tr>
<tr>
<td width="100">State:</td>
<td width="150">
<cfselect name="Modell_ID" 
          id="Modell_ID"
          bind="cfc:testselect6.GetMenu({Hersteller_ID})"
		  display="Modell_DE" 
          value="Modell_ID"/>
          </td>
       </tr>
 
</table>
<input name="" type="submit" />
</cfform>
</body>
</html>
 
cfc:
<cfcomponent output="false">
 <cffunction name="GetHersteller" access="remote" returnType="query">
  <cfargument name="vlangid" required="no" type="string" default="de">
  <cfset var data="">
     <cfquery name="data" datasource="#request.dsn#" dbtype="query">
     SELECT Hersteller_ID, Hersteller_Text
     FROM Hersteller
     WHERE 
     Mobiles_Subs_ID = <cfqueryparam cfsqltype="cf_sql_numeric" value="1">
     OR (Hersteller_ID = <cfqueryparam cfsqltype="cf_sql_integer" value="19999">
     AND LANGID = <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.vlangid#"> )
     OR	(Hersteller_NR = <cfqueryparam cfsqltype="cf_sql_integer" value="-1">
     AND LANGID = <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.vlangid#"> )
     ORDER BY Hersteller_NR
     </cfquery>
  <cfreturn data>
 </cffunction>
 
 <cffunction name="GetMenu" access="remote" returnType="query">
   <cfargument name="Hersteller_ID" type="any" required="true">
   <cfset var data="">
     <cfif ARGUMENTS.Hersteller_ID NEQ "">
       <cfquery name="data" datasource="#request.dsn#">
        SELECT Auto_ID,Modell_DE, Modell_ID
        FROM Modell_Auto_S
        WHERE Auto_ID = #ARGUMENTS.Hersteller_ID#
        ORDER BY Modell_NR
        </cfquery>
        <cfelse>
    	<cfquery name="data" datasource="#request.dsn#">
        SELECT Auto_ID,Modell_DE, Modell_ID
        FROM Modell_Auto_S
        WHERE Modell_NR = <cfqueryparam cfsqltype="cf_sql_numeric" value="20000">
        </cfquery>
      </cfif>
     <cfreturn data>
    </cffunction>
</cfcomponent>

Open in new window

0
Pravin AsarPrincipal Systems EngineerCommented:
For Text do string match



<script type="text/javascript">
var imdone = false;
function SelectsecondDefault(x,val) {
 if(!imdone) {
  var dd = document.getElementById('Modell_ID');
  for(var i = 0; i < dd.length; i++){

   if(dd.options[i].value.match(val) ){
    dd.selectedIndex = i;
   }
  }
  imdone = true;
 }
}
</script>
0
PanosAuthor Commented:
I have an error using Firebug:
missing ] after element list
http://localhost/CFIDE/scripts/ajax/package/cfajax.js
Line 103

My new cfm is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7" />
<title>Untitled Document</title>
<cfset defaultHersteller_ID = 2>
 
<!---
 Form was posted, so get the value of desired field(s).
--->
<cfif IsDefined("FORM.Hersteller_ID")>
        <cfset defaultHersteller_ID = #FORM.Hersteller_ID#>
</cfif>
 
<script type="text/javascript">
var imdone = false;
function SelectDefault(x,val) {
 if(!imdone) {
  var dd = document.getElementById('Hersteller_ID');
  for(var i = 0; i < dd.length; i++){
   if(dd.options[i].value == val){
    dd.selectedIndex = i;
   }
  }
  imdone = true;
 }
}
</script>
<cfset defaultModell_ID = 2> 
<cfif IsDefined("FORM.Modell_ID")>
        <cfset defaultModell_ID = #FORM.Modell_ID#>
</cfif>
 
<script type="text/javascript">
var imdone = false;
function SelectsecondDefault(x,val) {
 if(!imdone) {
  var dd = document.getElementById('Modell_ID');
  for(var i = 0; i < dd.length; i++){
 
   if(dd.options[i].value.match(val) ){
    dd.selectedIndex = i;
   }
  }
  imdone = true;
 }
}
</script>
</head>
 
<body>
<!--- Proxy function --->
<cfajaxproxy bind="javascript:SelectDefault({Hersteller_ID},#defaultHersteller_ID#)">
<cfajaxproxy bind="javascript:SelectsecondDefault({Modell_ID},#defaultModell_ID#)">
<cfform  action="#cgi.SCRIPT_NAME#" method="post" name="Localiza" preservedata="yes">
<table>
<tr>
<td width="100">Division:</td>
<td width="150">
<cfselect name="Hersteller_ID" 
          id="Hersteller_ID"
          bind="cfc:testselect6.GetHersteller()"
		  display="Hersteller_Text" 
          value="Hersteller_ID" 
          BindOnLoad="true"
          />
        </td>
   </tr>
<tr>
<td width="100">State:</td>
<td width="150">
<cfselect name="Modell_ID" 
          id="Modell_ID"
          bind="cfc:testselect6.GetMenu({Hersteller_ID})"
		  display="Modell_DE" 
          value="Modell_ID"/>
          </td>
       </tr>
 
</table>
<input name="" type="submit" />
</cfform>
</body>
</html>

Open in new window

0
PanosAuthor Commented:
I also noticed that when the value of the child select is a number ,i don't have an error but i don't the value.
If the value is a text f.e Rocsta i have an error:
Rocsta is not defined
http://localhost/test/related/testselect6.cfm
Line 57
0
PanosAuthor Commented:
Hi pravinasar
Finally i did get it work with another paar of selects i have.
I will look a little more carefully why it is not working with this code and i will come back.
Thank you for your help.
regards
Panos
0
Pravin AsarPrincipal Systems EngineerCommented:
The posted link about debug were not useful as it refers to your localhost.

Since you have closed the question, I am assuming you are satisfied with last post.

Are things working as expected.

Thanks for the points.

_PA
0
PanosAuthor Commented:
Hi pravinasar.
I did close the question because i did get it work with another paar of selects i have where both parent and child values are numeric or <NULL>.
I have opened a new question to find a solution for the problem i stil  have with the code above posting a part of the db table and cfm and cfc page.
You can take alook if you want:
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Cold_Fusion_Markup_Language/Q_24572518.html
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Servers

From novice to tech pro — start learning today.