<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Generator" content="Microsoft Word 14 (filtered medium)">
<style><!--
/* Font Definitions */
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
@font-face
{font-family:Consolas;
panose-1:2 11 6 9 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman","serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
pre
{mso-style-priority:99;
mso-style-link:"HTML Preformatted Char";
margin:0cm;
margin-bottom:.0001pt;
font-size:10.0pt;
font-family:"Courier New";}
p.MsoAcetate, li.MsoAcetate, div.MsoAcetate
{mso-style-priority:99;
mso-style-link:"Balloon Text Char";
margin:0cm;
margin-bottom:.0001pt;
font-size:8.0pt;
font-family:"Tahoma","sans-serif";}
span.HTMLPreformattedChar
{mso-style-name:"HTML Preformatted Char";
mso-style-priority:99;
mso-style-link:"HTML Preformatted";
font-family:Consolas;}
span.EmailStyle19
{mso-style-type:personal-reply;
font-family:"Calibri","sans-serif";
color:#1F497D;}
span.BalloonTextChar
{mso-style-name:"Balloon Text Char";
mso-style-priority:99;
mso-style-link:"Balloon Text";
font-family:"Tahoma","sans-serif";}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page WordSection1
{size:612.0pt 792.0pt;
margin:72.0pt 72.0pt 72.0pt 72.0pt;}
div.WordSection1
{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang="EN-GB" link="blue" vlink="purple">
<div class="WordSection1">
<p class="MsoNormal"><font size="2" face="Calibri"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif"">Strictly this is a jQuery question rather than a Dancer question, but:<o:p></o:p></span></font></p>
<p class="MsoNormal"><font size="2" face="Calibri"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif""><o:p> </o:p></span></font></p>
<p class="MsoNormal"><font size="2" face="Calibri"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif"">Assuming you’re making an ajax request to get the data, where data is of the form
<o:p></o:p></span></font></p>
<p class="MsoNormal"><font size="2" face="Calibri"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif""><o:p> </o:p></span></font></p>
<p class="MsoNormal"><font size="2" face="Calibri"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif"">[['kidney',1],['liver',2],['noggin',3]]
<o:p></o:p></span></font></p>
<p class="MsoNormal"><font size="2" face="Calibri"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif""><o:p> </o:p></span></font></p>
<p class="MsoNormal"><font size="2" face="Calibri"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif"">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:<o:p></o:p></span></font></p>
<p class="MsoNormal"><font size="2" face="Calibri"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif""><o:p> </o:p></span></font></p>
<p class="MsoNormal"><font size="2" face="Calibri"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif""> var selectElement = $('select[name=</span></font><font size="2" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif"">"tissue"</span></font><font size="2" face="Calibri"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif"">]').first().empty();
<o:p></o:p></span></font></p>
<p class="MsoNormal"><font size="2" face="Calibri"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif""><o:p> </o:p></span></font></p>
<p class="MsoNormal"><font size="2" face="Calibri"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif""> $.map(data, function(tissue){
<o:p></o:p></span></font></p>
<p class="MsoNormal"><font size="2" face="Calibri"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif""> selectElement.append( $('<option/>').attr('value',tissue[1]).text(tissue[0]))
<o:p></o:p></span></font></p>
<p class="MsoNormal"><font size="2" face="Calibri"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif""> } );<o:p></o:p></span></font></p>
<p class="MsoNormal"><font size="2" face="Calibri"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif""><o:p> </o:p></span></font></p>
<p class="MsoNormal"><font size="2" face="Calibri"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif"">In live production code you would probably want to use a better selector for the select element in case you have multiple panels.<o:p></o:p></span></font></p>
<p class="MsoNormal"><font size="2" face="Calibri"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif""><o:p> </o:p></span></font></p>
<p class="MsoNormal"><font size="2" face="Calibri"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif"">… however, if the tabs control the contents of the form, are you sure your form belongs outside the tabs and not inside them?<o:p></o:p></span></font></p>
<p class="MsoNormal"><font size="2" face="Calibri"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif""><o:p> </o:p></span></font></p>
<p class="MsoNormal"><font size="2" face="Calibri"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif"">Daniel<o:p></o:p></span></font></p>
<p class="MsoNormal"><font size="2" color="#1f497d" face="Calibri"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D"><o:p> </o:p></span></font></p>
<p class="MsoNormal"><font size="2" color="#1f497d" face="Calibri"><span style="font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D"><o:p> </o:p></span></font></p>
<div>
<div style="border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0cm 0cm 0cm">
<p class="MsoNormal"><b><font size="2" face="Tahoma"><span lang="EN-US" style="font-size:10.0pt;font-family:"Tahoma","sans-serif";font-weight:bold">From:</span></font></b><font size="2" face="Tahoma"><span lang="EN-US" style="font-size:10.0pt;font-family:"Tahoma","sans-serif"">
dancer-users [mailto:dancer-users-bounces@dancer.pm] <b><span style="font-weight:bold">On Behalf Of
</span></b>Wanjuan Yang<br>
<b><span style="font-weight:bold">Sent:</span></b> 23 March 2016 16:40<br>
<b><span style="font-weight:bold">To:</span></b> Perl Dancer users mailing list<br>
<b><span style="font-weight:bold">Subject:</span></b> Re: [dancer-users] how to change drop down list on different tabs<o:p></o:p></span></font></p>
</div>
</div>
<p class="MsoNormal"><font size="3" face="Times New Roman"><span style="font-size:12.0pt"><o:p> </o:p></span></font></p>
<div>
<div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"><o:p> </o:p></span></font></p>
</div>
</div>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"><o:p> </o:p></span></font></p>
</div>
<div style="border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0cm 0cm 0cm">
<p class="MsoNormal"><b><font size="3" color="black" face="Calibri"><span style="font-size:12.0pt;font-family:"Calibri","sans-serif";color:black;font-weight:bold">From:
</span></font></b><font color="black" face="Calibri"><span style="font-family:"Calibri","sans-serif";color:black">dancer-users <<a href="mailto:dancer-users-bounces@dancer.pm">dancer-users-bounces@dancer.pm</a>> on behalf of "John J. McDermott, CPLP" <<a href="mailto:jjm@jkintl.com">jjm@jkintl.com</a>><br>
<b><span style="font-weight:bold">Reply-To: </span></b>Perl Dancer users mailing list <<a href="mailto:dancer-users@dancer.pm">dancer-users@dancer.pm</a>><br>
<b><span style="font-weight:bold">Date: </span></b>Tuesday, March 22, 2016 at 5:38 PM<br>
<b><span style="font-weight:bold">To: </span></b>"<a href="mailto:dancer-users@dancer.pm">dancer-users@dancer.pm</a>" <<a href="mailto:dancer-users@dancer.pm">dancer-users@dancer.pm</a>><br>
<b><span style="font-weight:bold">Subject: </span></b>Re: [dancer-users] how to change drop down list on different tabs<o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"><o:p> </o:p></span></font></p>
</div>
<div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black">Changing the drop down can be done most easily client-side. Therefore, I'd use jQuery to switch tabs and change the
drop down.<br>
<br>
--john<o:p></o:p></span></font></p>
</div>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"><o:p> </o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black">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?<o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"><o:p> </o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black">It is a list, not a single value.<o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"><o:p> </o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black">Can anybody give me a hint please?<o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"><o:p> </o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black">Many thanks,<o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black">Wendy<o:p></o:p></span></font></p>
</div>
<div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"><o:p> </o:p></span></font></p>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black">On 3/22/2016 11:08 AM, Wanjuan Yang wrote:<o:p></o:p></span></font></p>
</div>
<blockquote style="margin-top:5.0pt;margin-bottom:5.0pt">
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black">Hi,<o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"><o:p> </o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black">I have a template:<o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black">The first part is a form with a drop down list.<o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black">The second part of the template consists different tabs.<o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"><o:p> </o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black">By selecting from the list, it shows different content in the second part of the template.<o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"><o:p> </o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black">But I want to change the drop down list content when switch between tabs. How can I do it?<o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"><o:p> </o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black">The simplified version of the codes look like:<o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"><o:p> </o:p></span></font></p>
</div>
<div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"> <div class="panel"><o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"> <h3 >Select a tissue specific analysis: </h3> <o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"> <div class="filt_options"><o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"> <form action=“/someaction/&" method="post" autocomplete="off"><o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"> <select name="tissue" class="tissue_selector"><o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"> <?pl foreach my $tissue ( @$tissues ){ ?><o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"> <option value="[== $tissue->[1] =]"> [== $tissue->[0] =]</option><o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"> <?pl } ?><o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"> </select><o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"> </form><o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"> </div><o:p></o:p></span></font></p>
</div>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"><o:p> </o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"> <div class="sub_data" id="tissue_selection”><o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"> <ul class="tabs"><o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"> <li><a href="#t_first">Overview</a></li><o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"> <li><a href=“#t_second”>Plot</a></li><o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"> </ul><o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"> <o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"> <div id="t_first" class=“overview”><o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"> </div><o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"><o:p> </o:p></span></font></p>
</div>
<div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"> <div id=“t_second” class="plot"><o:p></o:p></span></font></p>
</div>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"> </div><o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"></div><o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"></div><o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"><o:p> </o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black">Many thanks,<o:p></o:p></span></font></p>
</div>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black">Wendy<o:p></o:p></span></font></p>
</div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"><br>
<br>
<br>
<o:p></o:p></span></font></p>
<pre><font size="2" color="black" face="Courier New"><span style="font-size:10.0pt;color:black">_______________________________________________<o:p></o:p></span></font></pre>
<pre><font size="2" color="black" face="Courier New"><span style="font-size:10.0pt;color:black">dancer-users mailing list<o:p></o:p></span></font></pre>
<pre><font size="2" color="black" face="Courier New"><span style="font-size:10.0pt;color:black"><a href="mailto:dancer-users@dancer.pm">dancer-users@dancer.pm</a><a href="http://lists.preshweb.co.uk/mailman/listinfo/dancer-users">http://lists.preshweb.co.uk/mailman/listinfo/dancer-users</a><o:p></o:p></span></font></pre>
</blockquote>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black"><o:p> </o:p></span></font></p>
<div>
<p class="MsoNormal"><font size="2" color="black" face="Calibri"><span style="font-size:10.5pt;font-family:"Calibri","sans-serif";color:black">--
<br>
John J. McDermott, CPLP<br>
Learning and Performance Consultant<br>
jjm at jkintl.com 575/737-8556<br>
Check out my <a href="http://cybersecurity.learningtree.com">security blog posts</a><br>
Add an A for the Arts To STEM and get STEAM and a strong engine to move forward. <o:p>
</o:p></span></font></p>
</div>
</div>
</div>
</div>
</body>
</html>