jQuery addclass and remove class not updating properly

Question

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

Please add a new answer with the way you solved this, and mark it as answer — Anders Rask
– Anders Rask, Commented Jul 23, 2012 at 11:26

Per Jakobsen · Accepted Answer · 2012-07-15 19:49:12Z

1

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.

answered Jul 15, 2012 at 19:49

Per Jakobsen

32.4k1 gold badge35 silver badges62 bronze badges

Add a comment |

Kailie Quinn · Accepted Answer · 2012-03-11 21:09:23Z

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.

Stack Exchange Network

jQuery addclass and remove class not updating properly

2 Answers 2

Your Answer

Hot Network Questions

jQuery addclass and remove class not updating properly

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions