Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

[Solved] Selecting a specific dropdown item dynamically


Reply


6 Posts   3827 Views

Avatar
Shauna G

Community Member, 52 Posts

25 February 2010 at 9:26am

Edited: 26/02/2010 10:09am

I don't really know where to put this question, as the DropDown list is technically a form element (and the actual code I used on the static site functions like a form), but it's not really a form in the sense of the Contact Form or whatever. If a mod thinks this would be better suited in the Forms forum, then by all means, feel free to move it.

Anywho, I have a DropDown Field that I'm using as navigation (I know, I know, not best practice, not accessible; not my idea and I don't like doing it, but my client and my boss want it that way). What I'd like to do with it, is set a given list item (the one that reflects the current page) as the "selected" one after the new page loads.

I've tried using Javascript to set the selection, but it breaks the whole redirect script (it won't go to the selected page). So, what I need is either a way to get it to work with Javascript, or have a way for either PHP or a SilverStripe function to set the selected item on page load. The field itself is currently in the template, but I can move it into the PHP if needed.

Avatar
patjnr

Community Member, 101 Posts

26 February 2010 at 2:32am

HI

can u paste a sample of your code.

if you drop down is in the template you can do it this way.
i did it once with translations

<form name="form2">
<select name="select" >
<% control Translations %>
<option<% if current %>selected<% end_if %> VALUE="$link"><% sprintf(_t('SHOWINPAGE',' %s'),$name) %></option>
<% end_control %>
</select >
</form >

ta

P

Avatar
Shauna G

Community Member, 52 Posts

26 February 2010 at 5:19am

Okay, so now that I have fresh eyes, I've figured out why adding the selection script was breaking the whole thing (go go stupid errors from fatigue). However, I still haven't gotten the selection script itself to work.

Selection script:

function selectItem()
{

selectitem = location.pathname ;

document.getElementById(selectitem).selected = true;
}

Template code:

<form name="filterNav" method="post">
   Filter
   <select name="newurl" onchange="menuGoto(this.form)" id="filter">
   <option id="filterBy" value="filterBy">Filter</option>
   <option id="floor-plans" value="floor-plans">All</option>
   <option id="ranch-homes" value="ranch-homes">Ranch Homes</option>
   <option id="traditional" value="traditional">Two Story - Traditional</option>
   <option id="first-floor" value="first-floor">Two Story - First Floor Master</option>
   <option id="multi-level" value="multi-level">Two Story - Multi-Level Split</option>
   </select>

         </form>

The option IDs match the URLSegment and are only needed for those select few links, which I've understood location.pathname to work out to in the SS environment (since there's no nesting). I will eventually be phasing this system out of the site I'm working on, but need to get it working like the current, static one as soon as I can, which means this system until I can buy some more time to do a properly filtering page.

I'm no expert in JavaScript, by any means, so I'm probably missing something stupid for activating it on load.

Also, could you point me to some good information about creating custom controls? The documentation is nonexistent in that area that I've found (the Wiki entry for it is empty completely), and my Google-fu has been failing me.

Avatar
Devlin

Community Member, 215 Posts

26 February 2010 at 9:08am

Some dirty coding for the evening, well I hope that it will help.

<form name="filterNav" method="post">
Filter
<select name="newurl" onchange="menuGoto(this)" id="filter">
<option id="filterBy" value="filterBy">Filter</option>
<option id="floor-plans" value="floor-plans">All</option>
<option id="ranch-homes" value="ranch-homes">Ranch Homes</option>
<option id="traditional" value="traditional">Two Story - Traditional</option>
<option id="first-floor" value="first-floor">Two Story - First Floor Master</option>
<option id="multi-level" value="multi-level">Two Story - Multi-Level Split</option>
</select>
</form>

function menuGoto(selectbox) {
window.location.href = selectbox.value+"/";
}
function selectItem() {
var pathName = location.pathname;
var pathArray = pathName.split('/');
var selectItem = pathArray[pathArray.length-2];
if( selectItem!="" && document.getElementById(selectItem) ) {
document.getElementById(selectItem).selected = true;
}
}
document.body.onload = selectItem();

Avatar
Shauna G

Community Member, 52 Posts

26 February 2010 at 10:09am

Thanks for the help!

It took a little bit of playing with to get it working (primarily because I forgot I turned off write_javascript_to_body), but your solution worked!

Avatar
patjnr

Community Member, 101 Posts

26 February 2010 at 10:16am

Hi

Great it worked!
i think it will be good if you try to build your menu links dynamically like this

<Script language="JavaScript">
      
      function goto(form) { var index=form.select.selectedIndex
      if (form.select.options[index].value != "") {
      location=form.select.options[index].value;}}
      
   </Script>

<form name="form2">
<select name="select" onchange="goto(this.form)" SIZE="1" class="smallText" style="text-transform:capitalize;">
<% control Menu (1) %>
<option <% if current %>selected<% end_if %> value="$link"><% sprintf(_t('SHOWINPAGE',' %s'),$MenuTilte) %></option>
<% end_control %>
</select>
</form >

ta

Enjoy SS

P