Solved

jQuery :selected for options tag

Posted on 2011-02-23
19
747 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
ColdFusion MS SQL CSV Impport 10 66
Trying to deCrypt CSV file using coldfusion 29 159
script for sleep and wakeup on PC 2 120
trying to resize an Image, using CFimage tag. 8 32
Hi, Even though I have created this Tutorial on My personal Blog, Some people might not able to find my website, So here i am posting it again Today, from the topic it is very clear that i will be showing you here the very basic usage of how we …
Sometimes databases have MILLIONS of records and we need a way to quickly query that table to return the results me need. Sure you could use CFQUERY but it takes too long when there are millions of records. That is why SOLR was invented. Please …
This video shows how to quickly and easily add an email signature for all users on Exchange 2016. The resulting signature is applied on a server level by Exchange Online. The email signature template has been downloaded from: www.mail-signatures…
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …

810 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