jQuery UI Menu not working in ASP.NET MVC 4

Question

I'm working on a site built with ASP.NET MVC 4 that has a rather long menu in a left sidebar. I'm attempting to pretty things up by categorizing menu items in an accordion, with any items that have sub-items within the accordion expanding with a jQuery UI Menu. Here's an example of what I'm trying to do, with code pasted and slightly modified from the jQuery UI Menu page:

<div id="accordion" style="width: 300px;">
    <h3>Section 1</h3>
    <div>
        <ul id="menu" style="border: 0">
            <li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
            <li><a href="#">Ada</a></li>
            <li><a href="#">Adamsville</a></li>
            <li><a href="#">Addyston</a></li>
            <li> <a href="#">Delphi</a>
                <ul>
                    <li class="ui-state-disabled"><a href="#">Ada</a></li>
                    <li><a href="#">Saarland</a></li>
                    <li><a href="#">Salzburg</a></li>
                </ul>
            </li>
            <li><a href="#">Saarland</a></li>
            <li> <a href="#">Salzburg</a>
                <ul>
                    <li> <a href="#">Delphi</a>
                        <ul>
                            <li><a href="#">Ada</a></li>
                            <li><a href="#">Saarland</a></li>
                            <li><a href="#">Salzburg</a></li>
                        </ul>
                    </li>
                    <li> <a href="#">Delphi</a>
                        <ul>
                            <li><a href="#">Ada</a></li>
                            <li><a href="#">Saarland</a></li>
                            <li><a href="#">Salzburg</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Perch</a></li>
                </ul>
            </li>
            <li class="ui-state-disabled"><a href="#">Amesville</a></li>
        </ul>
    </div>
    <h3>Section 2</h3>
    <div>
        <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
            purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
            velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit
            faucibus urna.</p>
    </div>
</div>

Here's a jsFiddle of the above: http://jsfiddle.net/G54RH/

As you can see, it works fine in the jsFiddle. However, I can't for the life of me get it working in MVC 4. I've followed these steps several times with slight variations mainly involving CSS, and the menu never renders:

Create a new MVC 4 application in VS 2012.
Update jQuery to 1.9.1 (can't use 2.0 due to Microsoft.jQuery.Unobtrusive.Ajax incompatibility): update-package jQuery -version 1.9.1.
Update jQuery UI to 1.9.2: update-package jquery.ui.combined -version 1.9.2.
Install the ui-lightness theme for jQuery UI 1.9.2 (this is the theme I'm using with my actual application).
Add the ui-lightness style reference to the bundle config (see below).
Add/move script and style references <head> section of _Layout.cshmtl (see below).
Copy/paste the exact same code from the jsFiddle into the index.cshtml view.
Watch the menu not work on the resulting page.

I have published the MVC 4 project here and am happy to post any more details if requested. This is driving me crazy. What am I doing wrong?

BundleConfig addition:

bundles.Add(new StyleBundle("~/Content/themes/ui-lightness/css")
    .Include("~/Content/themes/ui-lightness/jquery-ui-1.9.2.custom.css"));

_Layout.cshtml changes/additions:

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/ui-lightness/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/modernizr")

Have you put it under $(document).ready(function(){ $("#accordion").accordion(); $("#menu").menu(); }); — PSL
– PSL, Commented May 16, 2013 at 15:56
Yes, the MVC 4 site has a <script> tag in the view with the $(document).ready call. — AJ.
– AJ., Commented May 16, 2013 at 15:57

AJ. · Accepted Answer · 2013-05-16 16:02:39Z

1

Oh my gosh, this is embarrassing. The _Layout.cshtml template has the following code:

<ul id="menu">
    <li>@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

I had duplicate <ul> elements with the ID "menu." I changed the ID of the <ul> in my view and now it works.

answered May 16, 2013 at 16:02

AJ.

16.7k22 gold badges101 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery UI Menu not working in ASP.NET MVC 4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related