Solved

jquery-select-manipulation and coldfusion

Posted on 2009-07-12
15
741 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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Recently while working on a project I got a very annoying cfdocument has no body error message. I had never seen this error before. So I checked the code. The code was pretty simple; it was Just showing me the cfdocumnt tag and inside that tag a …
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…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

758 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

21 Experts available now in Live!

Get 1:1 Help Now