Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 755
  • Last Modified:

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>
0
Panos
Asked:
Panos
  • 8
  • 5
2 Solutions
 
Pravin AsarCommented:
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
NFR key for Veeam Agent for Linux

Veeam is happy to provide a free NFR license for one year.  It allows for the non‑production use and valid for five workstations and two servers. Veeam Agent for Linux is a simple backup tool for your Linux installations, both on‑premises and in the public cloud.

 
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 AsarCommented:
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
 
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 AsarCommented:
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 AsarCommented:
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 8
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now