Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

jquery-select-manipulation and coldfusion

Posted on 2009-07-12
15
Medium Priority
?
754 Views
Last Modified: 2013-12-24
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
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
  • 8
  • 5
15 Comments
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 24842692
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
 
LVL 2

Author Comment

by:Panos
ID: 24843961
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
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 24850451
0
PowerShell Core for Advanced Linux Administrators

Understand advanced principals around Powershell Core with a focus on the Linux Administrator.  This course covers how to administer numerous environments across multiple platforms including Linux, Azure, AWS, and Google Cloud from a single shell instance.

 
LVL 2

Author Comment

by:Panos
ID: 24851077
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
 
LVL 29

Accepted Solution

by:
Pravin Asar earned 2000 total points
ID: 24852812
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
 
LVL 2

Author Comment

by:Panos
ID: 24854501
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
 
LVL 2

Author Comment

by:Panos
ID: 24854514
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
 
LVL 29

Assisted Solution

by:Pravin Asar
Pravin Asar earned 2000 total points
ID: 24854693
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
 
LVL 2

Author Comment

by:Panos
ID: 24854830
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
 
LVL 2

Author Comment

by:Panos
ID: 24854866
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
 
LVL 2

Author Closing Comment

by:Panos
ID: 31602560
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
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 24862925
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
 
LVL 2

Author Comment

by:Panos
ID: 24863507
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

Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The purpose of this video is to demonstrate how to manually back up a WordPress Database. This will be demonstrated using a Windows 8 PC. The Host used will be IPage.com Log into your Hosting account. IPage will be used for demonstration : Locat…
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…

670 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