Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I have a SharePoint ASPMenu in a MasterPage, I;m trying to change the selected style class using jQuery. Basically when user click a menu item it will cause postback so that the page will be directed to the clicked menu url. When the user clicked on a menu item I put the url in the cookie. Then when the page load I'll set the style for the selected menu. Here are my code so far

$(document).ready(function () { 
LinkClicked();  
FireMe();   
});
function FireMe()
{
    var val = $.cookie('sabValue');

    if(val !== null)
    {   
        $(".s4-tn a").each(function(){          
            $(this).removeClass("selected").closest("li").removeClass("selected"); 
        });
        $(".s4-tn a[href='"+val+"']").addClass("selected").closest("li").addClass("selected");          
    }      
}

function LinkClicked(){
    $(".s4-tn a").click(function() {
        var sabValue = $(this).attr("href");
        $.cookie('sabValue',sabValue );
    });         
}

My problem is, after the page load (after the user clicked a menu) the changes does not take place. I have to clicked the menu item again so that the selected style is applied. This is the Menu declaration:-

<SharePoint:AspMenu
  ID="TopNavigationMenuV4"
  Runat="server"
  EnableViewState="false"
  DataSourceID="topSiteMap"
  AccessKey="<%$Resources:wss,navigation_accesskey%>"
  UseSimpleRendering="true"
  UseSeparateCss="false"
  Orientation="Horizontal"
  StaticDisplayLevels="2"
  MaximumDynamicDisplayLevels="2"
  SkipLinkText=""
  CssClass="s4-tn"/>

Why is this happening. Appreciate any helps. Thanks

share|improve this question
    
Please add a new answer with the way you solved this, and mark it as answer –  Anders Rask Jul 23 '12 at 11:26
add comment

2 Answers

My guess would be that it's your updating of the cookie which isn't done before the postback to get the page, but you can use Fiddler to check if the cookie is updated in the request.

Also keep in mind that storing the last selected menu item in a cookie and highlighting based on that may confuse people using bookmarks, direct links, back button as the highlighting will be based on the last menu item clicked, not on the current page.

share|improve this answer
add comment

First thing I would do is use $(window).load as opposed to $(document).ready. It runs later in the page cycle. You can also just write $(function(){}); as a shortcut for document.ready.

Second thing: use f12 tools, set a breakpoint and debug. See if your code is firing, and also make sure that your cookie is being retrieved and the value exists. Core.js may very well be overwriting what you've done after the page goes into window.load

Third: You may want to look at writing a custom control if you want a custom menu. Saves trouble in the long run as the built in menu is terrible and you can just reuse the provider.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.