Reading sitemap currentNode from code behind to .addClass('selected') in jQuery not rendering unless it is hard coded?

I have a user control that uses two unordered lists with two asp:Repeaters inside to dynamically build a menu from a web.sitemap file. (http://msdn.microsoft.com/en-us/library/aa581781.aspx#aspnet_tutorial03_masterpagesandsitenav_cs_topic5)

Now I want to show the selected MainMenu node and SubMenu node.

To do so, I use jQuery to .addClass('selected') so my selected CSS class can apply to those nodes. Problem: jQuery will not render selected CSS unless the nodes are hard coded?

<script >
    $(document).ready(function() {  
         String liMenuNodes = ('<%=liTitles %>').toString();
         $(liMenuNodes).addClass('selected');

         // This way works but it is hard-coded, it is my desired end result
         // $("li#liInstitutions, li#liSearchInstitutionTypes").addClass('selected');
    });
</script>

In C# code-behind:

private string liTitleNodes = null;
    public string liTitles 
    { 
        get 
        {
            SiteMapNode currentNode = System.Web.SiteMap.CurrentNode;
            liTitleNodes = ("li#li" + currentNode.ParentNode.Title).Replace(" ", "");
            liTitleNodes += ", ";
            liTitleNodes += ("li#li" + currentNode.Title).Replace(" ", "");
            return liTitleNodes;
        }
    }

Eventually, I will move this code to the Site.Master page but cannot get it to work without hard-coding every page :( I'm wondering if the variable is being passed too late in the page's lifecycle but it looks seems like that isn't the case.

Thanks, Carrie

View Source:

<div id="navigation">
<ul id="mainMenu">

            <li id="liHome">
                <a href="/ESP2/Default.aspx?p=1">Home</a>
                <ul class="subMenu">

                            <li id="liDashboard"><a href="/ESP2/Default.aspx">Dashboard</a></li>

                            <li id="liImpersonateUser"><a href="/ESP2/Default.aspx?p=2">Impersonate User</a></li>

                <开发者_如何转开发;/ul>
            </li>

            <li id="liInstitutions">
                <a href="/ESP2/Institutions/SearchInstitutions.aspx?p=1">Institutions</a>
                <ul class="subMenu">

                            <li id="liSearchInstitutions"><a href="/ESP2/Institutions/SearchInstitutions.aspx">Search Institutions</a></li>

                            <li id="liSearchInstitutionTypes"><a href="/ESP2/Institutions/SearchInstitutionTypes.aspx">Search Institution Types</a></li>

                </ul>
            </li>

    <script >
    $(document).ready(function() { 
        String liMenuNodes = ('li#liInstitutions, li#liSearchInstitutionTypes').toString();
        $(liMenuNodes).addClass('selected');
    });       
    </script>

You are mixing C# and JavaScript syntax here:

$(document).ready(function() { 
    String liMenuNodes = ('li#liInstitutions, li#liSearchInstitutionTypes').toString();
    $(liMenuNodes).addClass('selected');
});      

JavaScript is a dynamically-typed language and you can't specify a String type. You also don't need the toString() function. The following code works:

$(document).ready(function() { 
    var liMenuNodes = 'li#liInstitutions, li#liSearchInstitutionTypes';
    $(liMenuNodes).addClass('selected');
});      

You can see it working in the following jsFiddle:

http://jsfiddle.net/JttxC/

You are running your jQuery code before the document is ready. So your results are going to be unpredictable and dependent on the ordering of HTML elements and scripts within your HTML. You should enclose all your jQuery code in $(document).ready() as follows:

$(document).ready(function() {
    $("li#liInstitutions, li#liSearchInstitutionTypes").addClass('selected');
});