make a select hold selected when page is loaded

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Oct 04, 2013 @ 21:51

Hi,

I´m working on a project where I use boostrap becase I want the website to be responsive.

When you get in tablet and mobile view I make my navigation as a select with some options.

The selected page get the seleted attribut, but my problem is that select don´t hold the value on the currentpage when it has loaded the page. Here is what I have so far.

I´m using Umbraco version 6.1.3 and I using Razor macro scripts.

@{ 
    @*Get the root of the website *@
    var root = Model.AncestorOrSelf(1);
}

<select name="MobileMainMenu" onchange="location = this.options[this.selectedIndex].value;" id="MobileMainMenu">
    <option value="/">Forsiden</option>
    @foreach (var page in root.Children.Where("Visible"))
    { 
          if (Model.HasValue("Navigationtitle"))
          {
            <option value="@page.Url" selected="@page.IsAncestorOrSelf(Model, "selected", "")">@page.Navigationtitle</option>
          }
          else
          {
            <option value="@page.Url" selected="@page.IsAncestorOrSelf(Model, "selected", "")">@page.Name</option>
          }
    }
</select>

I hope someone can help me figure it out and the issue is well explained, if not I will try to explain in further details.

/Dennis

Copy Link

Charles Afford 1163 posts 1709 karma points

Oct 06, 2013 @ 22:56

0

hey :). I could help. Is this a view or a partial view? Are you doing any posting server side? When you say not holding the value, what value are you getting? and when is this?

Also i would recommend not using var everywhere in your code. every where in the code you know the type you will get back, it decreases the time it takes someone to understand your code and decrease the potential for the complier to make an error. :). Charlie.

Copy Link
Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Oct 07, 2013 @ 08:22

0

Hi Charlie,

I am using Razor macro scripts and Master pages. When I click on a page in the select, I will get to the URL of the page, and the option that I clicked on in the select will get the attribute selected with the value of selected. But when the page is loaded, it always show the last option in the select, instead the option for the current page that I am on.

I only use the code that is posted in my previous post, so no posting server side. I think is because I have to set the value of the selected option when the page has been loaded.

Any help will be appreciated :-)

/Dennis

Copy Link

Jeavon Leopold 3074 posts 13631 karma points MVP 11x admin c-trib

Oct 07, 2013 @ 18:27

Hi Dennis,

How about:

@{ 
    @*Get the root of the website *@
    var root = Model.AncestorOrSelf(1);
}

<select name="MobileMainMenu" onchange="location = this.options[this.selectedIndex].value;" id="MobileMainMenu">
    <option value="/">Forsiden</option>
    @foreach (var page in root.Children.Where("Visible"))
    { 
          if (Model.HasValue("Navigationtitle"))
          {
            <option value="@page.Url" @if (page.IsAncestorOrSelf(Model)) {
                @Html.Raw( "selected=selected" )}>@page.Navigationtitle</option>
          }
          else
          {            
            <option value="@page.Url" @if (page.IsAncestorOrSelf(Model)) {
                @Html.Raw( "selected=selected" )
              }>@page.Name</option>
          }
    }
</select>

Jeavon

Copy Link

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Oct 07, 2013 @ 18:53

0

Hi Jeavon,

Thank you for your help, I appreciated it. Your suggestion worked perfectly.

/Dennis

Copy Link
is working on a reply...

Please Sign in or register to post replies