Solved

jquery-select-manipulation and coldfusion

Posted on 2009-07-12
15
742 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
  • 8
  • 5
15 Comments
 
LVL 28

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 28

Expert Comment

by:Pravin Asar
ID: 24850451
0
 
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 28

Accepted Solution

by:
Pravin Asar earned 500 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
Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

 
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 28

Assisted Solution

by:Pravin Asar
Pravin Asar earned 500 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 28

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Meet the world's only “Transparent Cloud™” from Superb Internet Corporation. Now, you can experience firsthand a cloud platform that consistently outperforms Amazon Web Services (AWS), IBM’s Softlayer, and Microsoft’s Azure when it comes to CPU and …
The purpose of this video is to demonstrate how to automatically show related posts at the bottom of a blog post in WordPress. This will be demonstrated using a Windows 8 PC. Plugin “Yet Another Related Posts Plugin” will be used. Go to your…
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…

947 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now