Solved

jQuery :selected for options tag

Posted on 2011-02-23
19
745 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
  • 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
 
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 500 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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 500 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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

PROBLEM:  How to open a cfwindow or run a function on double click of a cfgrid row. One of my clients wanted to be able to double click on a row item to get more detailed information about a transaction and to be able to modify the line items i…
I spent nearly three days trying to figure out how incorporate OAuth in Coldfusion for the Eventful API. Hopefully, this article will allow Coldfusion Programmers to buzz through the API when they need to. Basically, what this script does is authori…
This video discusses moving either the default database or any database to a new volume.
Here's a very brief overview of the methods PRTG Network Monitor (https://www.paessler.com/prtg) offers for monitoring bandwidth, to help you decide which methods you´d like to investigate in more detail.  The methods are covered in more detail in o…

762 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

22 Experts available now in Live!

Get 1:1 Help Now