how to change drop down list on different tabs
Hi, I have a template: The first part is a form with a drop down list. The second part of the template consists different tabs. By selecting from the list, it shows different content in the second part of the template. But I want to change the drop down list content when switch between tabs. How can I do it? The simplified version of the codes look like: <div class="panel"> <h3 >Select a tissue specific analysis: </h3> <div class="filt_options"> <form action=“/someaction/&" method="post" autocomplete="off"> <select name="tissue" class="tissue_selector"> <?pl foreach my $tissue ( @$tissues ){ ?> <option value="[== $tissue->[1] =]"> [== $tissue->[0] =]</option> <?pl } ?> </select> </form> </div> <div class="sub_data" id="tissue_selection”> <ul class="tabs"> <li><a href="#t_first">Overview</a></li> <li><a href=“#t_second”>Plot</a></li> </ul> <div id="t_first" class=“overview”> </div> <div id=“t_second” class="plot"> </div> </div> </div> Many thanks, Wendy
Changing the drop down can be done most easily client-side. Therefore, I'd use jQuery to switch tabs and change the drop down. --john On 3/22/2016 11:08 AM, Wanjuan Yang wrote:
Hi,
I have a template: The first part is a form with a drop down list. The second part of the template consists different tabs.
By selecting from the list, it shows different content in the second part of the template.
But I want to change the drop down list content when switch between tabs. How can I do it?
The simplified version of the codes look like:
<div class="panel"> <h3 >Select a tissue specific analysis: </h3> <div class="filt_options"> <form action=“/someaction/&" method="post" autocomplete="off"> <select name="tissue" class="tissue_selector"> <?pl foreach my $tissue ( @$tissues ){ ?> <option value="[== $tissue->[1] =]"> [== $tissue->[0] =]</option> <?pl } ?> </select> </form> </div>
<div class="sub_data" id="tissue_selection”> <ul class="tabs"> <li><a href="#t_first">Overview</a></li> <li><a href=“#t_second”>Plot</a></li> </ul>
<div id="t_first" class=“overview”> </div>
<div id=“t_second” class="plot"> </div> </div> </div>
Many thanks, Wendy
_______________________________________________ dancer-users mailing list dancer-users@dancer.pm http://lists.preshweb.co.uk/mailman/listinfo/dancer-users
-- John J. McDermott, CPLP Learning and Performance Consultant jjm at jkintl.com 575/737-8556 Check out my security blog posts <http://cybersecurity.learningtree.com> Add an A for the Arts To STEM and get STEAM and a strong engine to move forward.
From: dancer-users <dancer-users-bounces@dancer.pm<mailto:dancer-users-bounces@dancer.pm>> on behalf of "John J. McDermott, CPLP" <jjm@jkintl.com<mailto:jjm@jkintl.com>> Reply-To: Perl Dancer users mailing list <dancer-users@dancer.pm<mailto:dancer-users@dancer.pm>> Date: Tuesday, March 22, 2016 at 5:38 PM To: "dancer-users@dancer.pm<mailto:dancer-users@dancer.pm>" <dancer-users@dancer.pm<mailto:dancer-users@dancer.pm>> Subject: Re: [dancer-users] how to change drop down list on different tabs Changing the drop down can be done most easily client-side. Therefore, I'd use jQuery to switch tabs and change the drop down. --john I am able to get the data needed, but how to use jQuery to update the drop down, I.e. The option element in the template? It is a list, not a single value. Can anybody give me a hint please? Many thanks, Wendy On 3/22/2016 11:08 AM, Wanjuan Yang wrote: Hi, I have a template: The first part is a form with a drop down list. The second part of the template consists different tabs. By selecting from the list, it shows different content in the second part of the template. But I want to change the drop down list content when switch between tabs. How can I do it? The simplified version of the codes look like: <div class="panel"> <h3 >Select a tissue specific analysis: </h3> <div class="filt_options"> <form action=“/someaction/&" method="post" autocomplete="off"> <select name="tissue" class="tissue_selector"> <?pl foreach my $tissue ( @$tissues ){ ?> <option value="[== $tissue->[1] =]"> [== $tissue->[0] =]</option> <?pl } ?> </select> </form> </div> <div class="sub_data" id="tissue_selection”> <ul class="tabs"> <li><a href="#t_first">Overview</a></li> <li><a href=“#t_second”>Plot</a></li> </ul> <div id="t_first" class=“overview”> </div> <div id=“t_second” class="plot"> </div> </div> </div> Many thanks, Wendy _______________________________________________ dancer-users mailing list dancer-users@dancer.pm<mailto:dancer-users@dancer.pm>http://lists.preshweb.co.uk/mailman/listinfo/dancer-users -- John J. McDermott, CPLP Learning and Performance Consultant jjm at jkintl.com 575/737-8556 Check out my security blog posts<http://cybersecurity.learningtree.com> Add an A for the Arts To STEM and get STEAM and a strong engine to move forward.
Strictly this is a jQuery question rather than a Dancer question, but: Assuming you’re making an ajax request to get the data, where data is of the form [['kidney',1],['liver',2],['noggin',3]] I’m assuming this structure because this is what your template expects – then you could achieve this by code in the success function in your $.ajax call along the lines of: var selectElement = $('select[name="tissue"]').first().empty(); $.map(data, function(tissue){ selectElement.append( $('<option/>').attr('value',tissue[1]).text(tissue[0])) } ); In live production code you would probably want to use a better selector for the select element in case you have multiple panels. … however, if the tabs control the contents of the form, are you sure your form belongs outside the tabs and not inside them? Daniel From: dancer-users [mailto:dancer-users-bounces@dancer.pm] On Behalf Of Wanjuan Yang Sent: 23 March 2016 16:40 To: Perl Dancer users mailing list Subject: Re: [dancer-users] how to change drop down list on different tabs From: dancer-users <dancer-users-bounces@dancer.pm<mailto:dancer-users-bounces@dancer.pm>> on behalf of "John J. McDermott, CPLP" <jjm@jkintl.com<mailto:jjm@jkintl.com>> Reply-To: Perl Dancer users mailing list <dancer-users@dancer.pm<mailto:dancer-users@dancer.pm>> Date: Tuesday, March 22, 2016 at 5:38 PM To: "dancer-users@dancer.pm<mailto:dancer-users@dancer.pm>" <dancer-users@dancer.pm<mailto:dancer-users@dancer.pm>> Subject: Re: [dancer-users] how to change drop down list on different tabs Changing the drop down can be done most easily client-side. Therefore, I'd use jQuery to switch tabs and change the drop down. --john I am able to get the data needed, but how to use jQuery to update the drop down, I.e. The option element in the template? It is a list, not a single value. Can anybody give me a hint please? Many thanks, Wendy On 3/22/2016 11:08 AM, Wanjuan Yang wrote: Hi, I have a template: The first part is a form with a drop down list. The second part of the template consists different tabs. By selecting from the list, it shows different content in the second part of the template. But I want to change the drop down list content when switch between tabs. How can I do it? The simplified version of the codes look like: <div class="panel"> <h3 >Select a tissue specific analysis: </h3> <div class="filt_options"> <form action=“/someaction/&" method="post" autocomplete="off"> <select name="tissue" class="tissue_selector"> <?pl foreach my $tissue ( @$tissues ){ ?> <option value="[== $tissue->[1] =]"> [== $tissue->[0] =]</option> <?pl } ?> </select> </form> </div> <div class="sub_data" id="tissue_selection”> <ul class="tabs"> <li><a href="#t_first">Overview</a></li> <li><a href=“#t_second”>Plot</a></li> </ul> <div id="t_first" class=“overview”> </div> <div id=“t_second” class="plot"> </div> </div> </div> Many thanks, Wendy _______________________________________________ dancer-users mailing list dancer-users@dancer.pm<mailto:dancer-users@dancer.pm>http://lists.preshweb.co.uk/mailman/listinfo/dancer-users -- John J. McDermott, CPLP Learning and Performance Consultant jjm at jkintl.com 575/737-8556 Check out my security blog posts<http://cybersecurity.learningtree.com> Add an A for the Arts To STEM and get STEAM and a strong engine to move forward.
Hi Daniel, That is really helpful. Thank you very much! Wendy From: dancer-users <dancer-users-bounces@dancer.pm<mailto:dancer-users-bounces@dancer.pm>> on behalf of Daniel Perrett <dp13@sanger.ac.uk<mailto:dp13@sanger.ac.uk>> Reply-To: Perl Dancer users mailing list <dancer-users@dancer.pm<mailto:dancer-users@dancer.pm>> Date: Wednesday, March 23, 2016 at 5:00 PM To: Perl Dancer users mailing list <dancer-users@dancer.pm<mailto:dancer-users@dancer.pm>> Subject: Re: [dancer-users] how to change drop down list on different tabs Strictly this is a jQuery question rather than a Dancer question, but: Assuming you’re making an ajax request to get the data, where data is of the form [['kidney',1],['liver',2],['noggin',3]] I’m assuming this structure because this is what your template expects – then you could achieve this by code in the success function in your $.ajax call along the lines of: var selectElement = $('select[name="tissue"]').first().empty(); $.map(data, function(tissue){ selectElement.append( $('<option/>').attr('value',tissue[1]).text(tissue[0])) } ); In live production code you would probably want to use a better selector for the select element in case you have multiple panels. … however, if the tabs control the contents of the form, are you sure your form belongs outside the tabs and not inside them? Daniel From: dancer-users [mailto:dancer-users-bounces@dancer.pm] On Behalf Of Wanjuan Yang Sent: 23 March 2016 16:40 To: Perl Dancer users mailing list Subject: Re: [dancer-users] how to change drop down list on different tabs From: dancer-users <dancer-users-bounces@dancer.pm<mailto:dancer-users-bounces@dancer.pm>> on behalf of "John J. McDermott, CPLP" <jjm@jkintl.com<mailto:jjm@jkintl.com>> Reply-To: Perl Dancer users mailing list <dancer-users@dancer.pm<mailto:dancer-users@dancer.pm>> Date: Tuesday, March 22, 2016 at 5:38 PM To: "dancer-users@dancer.pm<mailto:dancer-users@dancer.pm>" <dancer-users@dancer.pm<mailto:dancer-users@dancer.pm>> Subject: Re: [dancer-users] how to change drop down list on different tabs Changing the drop down can be done most easily client-side. Therefore, I'd use jQuery to switch tabs and change the drop down. --john I am able to get the data needed, but how to use jQuery to update the drop down, I.e. The option element in the template? It is a list, not a single value. Can anybody give me a hint please? Many thanks, Wendy On 3/22/2016 11:08 AM, Wanjuan Yang wrote: Hi, I have a template: The first part is a form with a drop down list. The second part of the template consists different tabs. By selecting from the list, it shows different content in the second part of the template. But I want to change the drop down list content when switch between tabs. How can I do it? The simplified version of the codes look like: <div class="panel"> <h3 >Select a tissue specific analysis: </h3> <div class="filt_options"> <form action=“/someaction/&" method="post" autocomplete="off"> <select name="tissue" class="tissue_selector"> <?pl foreach my $tissue ( @$tissues ){ ?> <option value="[== $tissue->[1] =]"> [== $tissue->[0] =]</option> <?pl } ?> </select> </form> </div> <div class="sub_data" id="tissue_selection”> <ul class="tabs"> <li><a href="#t_first">Overview</a></li> <li><a href=“#t_second”>Plot</a></li> </ul> <div id="t_first" class=“overview”> </div> <div id=“t_second” class="plot"> </div> </div> </div> Many thanks, Wendy _______________________________________________ dancer-users mailing list dancer-users@dancer.pm<mailto:dancer-users@dancer.pm>http://lists.preshweb.co.uk/mailman/listinfo/dancer-users -- John J. McDermott, CPLP Learning and Performance Consultant jjm at jkintl.com 575/737-8556 Check out my security blog posts<http://cybersecurity.learningtree.com> Add an A for the Arts To STEM and get STEAM and a strong engine to move forward.
On Tue, 22 Mar 2016 17:08:18 +0000 Wanjuan Yang <wy1@sanger.ac.uk> wrote:
I have a template: The first part is a form with a drop down list. The second part of the template consists different tabs.
By selecting from the list, it shows different content in the second part of the template.
But I want to change the drop down list content when switch between tabs. How can I do it?
I don't think you need to change your template at all. You need to change the contents of the array in $tissues, which is probably built using a query from your database. The key is to find out what tab you're on in your app (probably based on some param), and then modify your query based on what types of data you want to see for each tab. If you post the code for your app, I could be more specific.
The simplified version of the codes look like:
<div class="panel"> <h3 >Select a tissue specific analysis: </h3> <div class="filt_options"> <form action=“/someaction/&" method="post" autocomplete="off"> <select name="tissue" class="tissue_selector"> <?pl foreach my $tissue ( @$tissues ){ ?> <option value="[== $tissue->[1] =]"> [== $tissue->[0] =]</option> <?pl } ?> </select> </form> </div>
<div class="sub_data" id="tissue_selection”> <ul class="tabs"> <li><a href="#t_first">Overview</a></li> <li><a href=“#t_second”>Plot</a></li> </ul>
<div id="t_first" class=“overview”> </div>
<div id=“t_second” class="plot"> </div> </div> </div>
-- C. Chad Wallace, B.Sc. The Lodging Company http://www.lodgingcompany.com/ OpenPGP Public Key ID: 0x262208A0
On 3/22/16, 9:34 PM, "dancer-users on behalf of Chad Wallace" <dancer-users-bounces@dancer.pm on behalf of cwallace@lodgingcompany.com> wrote:
On Tue, 22 Mar 2016 17:08:18 +0000 Wanjuan Yang <wy1@sanger.ac.uk> wrote:
I have a template: The first part is a form with a drop down list. The second part of the template consists different tabs.
By selecting from the list, it shows different content in the second part of the template.
But I want to change the drop down list content when switch between tabs. How can I do it?
I don't think you need to change your template at all. You need to change the contents of the array in $tissues, which is probably built using a query from your database. The key is to find out what tab you're on in your app (probably based on some param), and then modify your query based on what types of data you want to see for each tab.
If you post the code for your app, I could be more specific.
Thanks for your reply. I can now detect which tab I am on, and get the tissue list from backend. How to re-populate the tissue list(the select section in the template) using jquery? Thanks in advance! Wendy
The simplified version of the codes look like:
<div class="panel"> <h3 >Select a tissue specific analysis: </h3> <div class="filt_options"> <form action=“/someaction/&" method="post" autocomplete="off"> <select name="tissue" class="tissue_selector"> <?pl foreach my $tissue ( @$tissues ){ ?> <option value="[== $tissue->[1] =]"> [== $tissue->[0] =]</option> <?pl } ?> </select> </form> </div>
<div class="sub_data" id="tissue_selection”> <ul class="tabs"> <li><a href="#t_first">Overview</a></li> <li><a href=“#t_second”>Plot</a></li> </ul>
<div id="t_first" class=“overview”> </div>
<div id=“t_second” class="plot"> </div> </div> </div>
--
C. Chad Wallace, B.Sc. The Lodging Company http://www.lodgingcompany.com/ OpenPGP Public Key ID: 0x262208A0
_______________________________________________ dancer-users mailing list dancer-users@dancer.pm http://lists.preshweb.co.uk/mailman/listinfo/dancer-users
participants (4)
-
Chad Wallace -
Daniel Perrett -
John J. McDermott, CPLP -
Wanjuan Yang