Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

jQuery :selected for options tag

Posted on 2011-02-23
19
Medium Priority
?
756 Views
Last Modified: 2012-05-11
Does anyone have a solution out there for a dynamic option tag that once an option is selected another option tag can appear with data specific options pertaining to the first tag and what was selected?

 I'm looking for a solution that does not use page refreshing... like jquery or javascript but pulling from a coldfusion query.
0
Comment
Question by:jasch2244
[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
  • 6
  • 4
  • +1
19 Comments
 
LVL 39

Expert Comment

by:gdemaria
ID: 34967096

some coldfusion custom tag exists called "CF_TWOSELECTSRELATED"  
It creates the javascript you need..


http://projects.nateweiss.com/nwdc/workcode.htm

0
 
LVL 1

Author Comment

by:jasch2244
ID: 34967146
Thank you for the recomendation but I'm looking to show another option tag only if a certain option is selected in the first tag... I hope that makes sense.

To clarify, I am creating a lead tracking system that when a lead comes in the end user will input data via form, if the lead came in through the internet I want another option tag to appear / show up and  state all of the available internet options the lead could have come from... if the lead was not from the internet the other tag does not show up nor does data get entered into the database.
0
 

Expert Comment

by:chenrijano
ID: 34967157
there are many option for it
http://www.google.co.id/search?sourceid=chrome&ie=UTF-8&q=jquery+dynamic+option

basically there are 2 options:
1. the variables loaded in the page
- if the condition/variables not too many
2. the variables loaded through ajax
- if the condition/variables are just too many to load in the page
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 34967448
You can use coldfusion to do it, example

<cfform>
<!--- Here I am selecting say vendors, and below cfselect will display the family of vendors --->

<select name="vendor" id="vendor_id">
      <option value="1"> abcd </option>
      <option value="2"> defg </option>
</select>

<!--- pass the vendor id selected  above to your component which will query as per vendor id and return back the family details --->

 <cfselect name="vendorfamily" bind="cfc:YourComponent.getfamily({vendor})" class="select"  bindOnLoad="true" id="nbafamily_id">
  </cfselect>

</cfform>
0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 34967523
Also remember, you function should have access type as REMOTE and return a 2 dimensional ARRAY.. something like

<cffunction name="getfamily" access="remote" returntype="array">
<cfargument name="vendorname" type="string" required="yes">
    <cfset family = arraynew(2) />
    <cfset k = 1 />
    <cfset family[1][1] = "" />
    <cfset family[1][2] = " --Select -- " />
    
    <cfquery name="getFamilyDetails" datasource="#dsn#">
        select distinct(FAMILY) from exDatabase
        where VENDOR = '#ARGUMENTS.vendorname#'
    </cfquery>
    
    <cfif getFamilyDetails.RECORDCOUNT GTE 1>
    <cfloop query="getFamilyDetails">
    	<cfset k = k + 1 />
    	<cfset family[k][1] = #FAMILY# />
        <cfset family[k][2] = #FAMILY# />
    </cfloop>
    	 <cfset family[k+1][1] = "fOther" />
    	 <cfset family[k+1][2] = "Other" />
    <cfelse>
    	    <cfset family[2][1] = "fOther" />
    	<cfset family[2][2] = "Other" />
    </cfif>
    
    
    <cfreturn family />
</cffunction>

Open in new window

0
 
LVL 1

Author Comment

by:jasch2244
ID: 34970210
Wow this code is way above my head I'll have to do some research as I've been scared of cfc. Also, with this functionality happen without a page refresh?
0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 34970277
Yes, this works without page refresh.

The code is actually very simple,

Step 1 -> Add the select name

Step 2 -> use cfselect and bind it to the selected name in step1.

Step 3 -> Create your component, just remeber select has [name, value] <option value = 1>ABCD</option>, so your query should return an 2 dimensional array.

I have been using it and it works great... let me see if I can pull up a tutorial link for you where you can understand it much better...
0
 
LVL 11

Accepted Solution

by:
Brijesh Chauhan earned 2000 total points
ID: 34970325
0
 
LVL 39

Expert Comment

by:gdemaria
ID: 34973305
Except for one thing, I don't see anywhere in that code that will hide the 2nd select box.  Brij, if the 2nd select box will be hidden if there are no entries, can you please say what code is doing that.

Otherwise, you might as well go with the custom tag and use javascript so it will work faster.   The benefit to the bind/cfc approach is if the lists are really huge you don't have to load them all at once on the page.  

But in either case, the 2nd select tag will show
0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 34973410
gdemaria, no the second box is NOT HIDDEN, the second select tag would show ...initially there would be nothing in there, just --Select -- (see line 5 and 6 of component code), once you select an option in first select tag, it would should the choices pulled from the query.

I have not compared the speeds, but it works great..
0
 
LVL 39

Expert Comment

by:gdemaria
ID: 34973464

The author's requirement is the 2nd select box must be hidden when not needed
0
 
LVL 1

Author Comment

by:jasch2244
ID: 34976074
brijeshchauhan: your suggestion was greatly appreciated in a perfect world it would be nice to make it appear only if a certain topic was chosen. My use is to track sales leads and only have the other option tag appear if the lead was generated via the internet (selected option). I could probably make your solution work though... I'll play around with it and see what I can do... in the meantime if anyone has a jquery suggestion or example please let me know.
0
 
LVL 1

Author Comment

by:jasch2244
ID: 34980337
I'm having a couple of problems:
 1.) I can't seem to get the other cfselect to populate, seems like I'm having a binding issue. I copied the code provided in the link above and plugged in my queries ect. If you look at the origonal cfc (art.cfc) looks like they are passing "mediaid" the name of my argument is pk (for primary key) is this an issue.

 2.) If the first cfselect option does not populate the second how do I have a default of the second cfselect = 0 being it is going to have to be inserted into the database and not equal 0. I hope that make sense
//////////////Lead-Related-Selects.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=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<cfform>
<table>
    <tr>
        <td>Select Lead Source:</td>
        <td><cfselect name="Source"
                bind="cfc:LeadSource.getSource()"
                bindonload="true" /></td>
    </tr>
    <tr>
        <td>Select Internet Lead Source:</td>
        <td><cfselect name="InternetSource"
                bind="cfc:LeadSource.getISource({pk})" /></td>
    </tr>
</table>
</cfform>
</body>
</html>

///////////////////LeadSource.cfc////////////////
<cfcomponent output="false">

    <cfset THIS.dsn="MYDSN">

    <!--- Get array of media types --->
    <cffunction name="getSource" access="remote" returnType="array">
        <!--- Define variables --->
        <cfset var data="">
        <cfset var result=ArrayNew(2)>
        <cfset var i=0>
        <!--- Get data --->
        <cfquery name="data" datasource="#THIS.dsn#">
        SELECT pk, Source
        FROM source
        ORDER BY Source
        </cfquery>
        <!--- Convert results to array --->
        <cfloop index="i" from="1" to="#data.RecordCount#">
            <cfset result[i][1]=data.pk[i]>
            <cfset result[i][2]=data.Source[i]>
        </cfloop>
        <!--- And return it --->
        <cfreturn result>
    </cffunction>
    <!--- Get art by media type --->
    <cffunction name="getISource" access="remote" returnType="array">
        <cfargument name="pk" type="numeric" required="true">
        <!--- Define variables --->
        <cfset var data="">
        <cfset var result=ArrayNew(2)>
        <cfset var i=0>
        <!--- Get data --->
        <cfquery name="data" datasource="#THIS.dsn#">
        SELECT theKey,internetSource,sourcePk
        FROM source_internet
        WHERE sourcePk = #ARGUMENTS.pk#
        ORDER BY theKey
        </cfquery>
            <!--- Convert results to array --->
        <cfloop index="i" from="1" to="#data.RecordCount#">
            <cfset result[i][1]=data.theKey[i]>
            <cfset result[i][2]=data.internetSource[i]>
        </cfloop>
        <!--- And return it --->
        <cfreturn result>
    </cffunction>

</cfcomponent>

Open in new window

0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 34980408
In the second select, you have to pass the NAME of the first select... that is instead of pk, you have to pass source..

//////////////Lead-Related-Selects.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=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<cfform>
<table>
    <tr>
        <td>Select Lead Source:</td>
        <td><cfselect name="Source"
                bind="cfc:LeadSource.getSource()"
                bindonload="true" /></td>
    </tr>
    <tr>
        <td>Select Internet Lead Source:</td>
        <td><cfselect name="InternetSource"
                bind="cfc:LeadSource.getISource({Source})" /></td>
    </tr>
</table>
</cfform>
</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:jasch2244
ID: 34980479
Well that was an easy fix... even though I don't understand how that works, but that's my issue I will study it. One other thing... I've had to create another feild for the internet source (internetSource) if the user chooses a lead source that is not say internet (print media) and the second cfselect has nothing to pull from how do I enter a value of 0 for "InternetSource" cfselect?
0
 
LVL 11

Assisted Solution

by:Brijesh Chauhan
Brijesh Chauhan earned 2000 total points
ID: 34980588
///////////////////LeadSource.cfc////////////////
<cfcomponent output="false">

    <cfset THIS.dsn="MYDSN">

    <!--- Get array of media types --->
    <cffunction name="getSource" access="remote" returnType="array">
        <!--- Define variables --->
        <cfset var data="">
        <cfset var result=ArrayNew(2)>
        <cfset var i=0>
        <!--- Get data --->
        <cfquery name="data" datasource="#THIS.dsn#">
        SELECT pk, Source
        FROM source
        ORDER BY Source
        </cfquery>
        <!--- Convert results to array --->
        <cfloop index="i" from="1" to="#data.RecordCount#">
            <cfset result[i][1]=data.pk[i]>
            <cfset result[i][2]=data.Source[i]>
        </cfloop>
        <!--- And return it --->
        <cfreturn result>
    </cffunction>
    <!--- Get art by media type --->
    <cffunction name="getISource" access="remote" returnType="array">
        <cfargument name="pk" type="numeric" required="true">
        <!--- Define variables --->
        <cfset var data="">
        <cfset var result=ArrayNew(2)>
        <cfset var i=0>
        <!--- Get data --->
        <cfquery name="data" datasource="#THIS.dsn#">
        SELECT theKey,internetSource,sourcePk
        FROM source_internet
        WHERE sourcePk = #ARGUMENTS.pk#
        ORDER BY theKey
        </cfquery>
            <!--- Convert results to array --->
	<cfif data.RECORDCOUNT GTE 1>
        
        <cfloop index="i" from="1" to="#data.RecordCount#">
            <cfset result[i][1]=data.theKey[i]>
            <cfset result[i][2]=data.internetSource[i]>
        </cfloop>
        
	<cfelse>
		
	<cfset result[1][1]="">
            <cfset result[1][2]= 0 >
        
		</cfif>
		<!--- And return it --->
		<cfreturn result>
    </cffunction>

</cfcomponent> 

Open in new window



Add a condition that if your recordcound GT 1, then show the options, otherwise, show 0
0
 
LVL 1

Author Closing Comment

by:jasch2244
ID: 34980988
Awesome... works great thank you. I guess down the road I'll create a condtional that will hide the second cfselect if something is not selected... but this will get me up and running. Thank you so much!
0
 
LVL 39

Expert Comment

by:gdemaria
ID: 34981069
jash, just an FYI that you asked for a javascript solution, which I provided in the first post.  But you didn't accept it because it didn't hide the second select tag.  

You ended up accepting a solution that also doesn't hide the second select tag...

The CF ajax solution is a very good one, but equal to the solution I provided.
0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 34981342
Glad to help you jash, here is a simple Jquery Solution to hide the second select..

You just need to change the condition 'SOME VALUE' according to your data.. but this should help you

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

<script type="text/javascript"> 
/* <![CDATA[ */ 
$(document).ready(function() { 
$('div.textfield').hide(); 
$('#source).change(function() { 
if ($("#source").val() === 'SOME VALUE' ){ 
$('div.textfield').show(); 
} 
else{ 
$('div.textfield').hide(); 
} 
}); 

Open in new window


Just add ID's in here

<cfform>
<p>Select Lead Source:</p>
        <p><cfselect name="Source" id="Source"
                bind="cfc:LeadSource.getSource()"
                bindonload="true" /></p>
    <div class="textfield">
        <p>Select Internet Lead Source:</p>
        <p><cfselect name="InternetSource"
                bind="cfc:LeadSource.getISource({Source})" /></p>
      </div>
</cfform>

Open in new window

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This is an updated version of a post made on my blog over 3 years ago. It is unfortunately, still very relevant as we continue to see both SQLi (SQL injection) and XSS (cross site scripting) attacks hitting some of the most recognizable website and …
Hi. There are several upload tutorials using jquery and coldfusion. I found a very interesting one here Upload Your Files using Jquery & ColdFusion and Preview them (http://www.randhawaworld.com/) . I did keep the main js functions but made sever…
This course is ideal for IT System Administrators working with VMware vSphere and its associated products in their company infrastructure. This course teaches you how to install and maintain this virtualization technology to store data, prevent vuln…
In a question here at Experts Exchange (https://www.experts-exchange.com/questions/29062564/Adobe-acrobat-reader-DC.html), a member asked how to create a signature in Adobe Acrobat Reader DC (the free Reader product, not the paid, full Acrobat produ…
Suggested Courses

618 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