Why is my jQuery drill down menu not working?

Question

I am attempting to add the jQuery drilldown menu to my web app. I have followed the instructions here and copied the source code from here. When I add everything to my project and the code to my _layout.cshtml site the drill down menu does not work the page looks like a regular tree structure for nested unordered lists.

jQuery this is in the head tag:

    <script src="@Url.Content("~/Scripts/jquery.cookie.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.dcdrilldown.1.2.min.js")"></script>
    <script type="text/javascript">
                    $(document).ready(function() {
            $('#drilldown').dcDrilldown({
                speed: 'slow',
                saveState: true,
                showCount: false,
                linkType: 'breadcrumb'
            });
        });

    </script>

Html:

 <ul class="pull-left span1" id="drilldown">
            <li><a href="#">Record Check</a></li>
            <li><a href="#">Reports/Statistics</a></li>
            <ul>
                <li><a href="#">USN</a></li>
                <ul>
                    <li><a href="#">Aclohol Incidents and Status Reports</a></li>
                    <ul>
                        <li><a href="#">Alcohol Incidents(By FY)</a></li>
                        <ul>
                            <li><a href="#">Fiscal Year</a></li>
                            <li><a href="#">Category</a></li>
                        </ul>
                        <li><a href="#">Alcohol Status Reports</a></li>
                    </ul>
                    <li><a href="#">Urinalysis Reports</a></li>
                    <li><a href="#">DAAR Listing</a></li>
                    <li><a href="#">Laboratory Positive Status Report</a></li>
                    <li><a href="#">Screening Listing</a></li>
                    <li><a href="#">Group Profile</a></li>
                    <ul>
                        <li><a href="#">With Details</a></li>
                        <li><a href="#">Without Details</a></li>
                    </ul>
                    <li><a href="#">Unit Profile</a></li>
                    <li><a href="#">ADMITS User and UIC Listings</a></li>
                    <ul>
                        <li><a href="#">ADMITS User Listing</a></li>
                        <li><a href="#">UIC Listing</a></li>
                    </ul>
                </ul>
                <li><a href="#">USMC</a></li>
                <li><a href="#">STAFF</a></li>
                <li><a href="#">DAPA/UPC</a></li>
            </ul>
            <li><a href="#">DAAR Data</a></li>
            <li><a href="#">Training</a></li>
            <li><a href="#">Edit Unit</a></li>
            <li><a href="#">Screening</a></li>
            <li><a href="#">Facility</a></li>
            <li><a href="#">Treatment</a></li>
            <li><a href="#">Waiver Data</a></li>
            <li><a href="#">New Report - Test</a></li>
            <li><a href="#">UIC Search</a></li>
            <li><a href="#">Spice</a></li>
            <li><a href="#">Breathalyzer</a></li>
        </ul>

Any ideas on why my drill down menu is not appearing?

Update

I should have mentioned this is an MVC4 app so the two sets of double quotes are required.

Update 2

as requested my page source looks like:

<head>
    <title>Home Page</title>
    <link href="/Content/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/Content/base-admin.css" rel="stylesheet" type="text/css" />
    <link href="/Content/base-admin-responsive.css" rel="stylesheet" type="text/css" />
    <link href="/Content/fontAwesome/font-awesome.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.9.1.min.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/excanvas.min.js"></script>
    <script src="/Scripts/jquery.cookie.js"></script>
    <script runat="server" src="/Scripts/jquery.dcdrilldown.1.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#drilldown').dcDrilldown({
                speed: 'slow',
                saveState: true,
                showCount: false,
                linkType: 'breadcrumb'
            });
        });

    </script>
</head>

    <div class="pull-left span1">
        <ul id="drilldown">
            <li><a href="#">Record Check</a></li>
            <li><a href="#">Reports/Statistics</a></li>
            <ul>
                <li><a href="#">USN</a></li>
                <ul>
                    <li><a href="#">Aclohol Incidents and Status Reports</a></li>
                    <ul>
                        <li><a href="#">Alcohol Incidents(By FY)</a></li>
                        <ul>
                            <li><a href="#">Fiscal Year</a></li>
                            <li><a href="#">Category</a></li>
                        </ul>
                        <li><a href="#">Alcohol Status Reports</a></li>
                    </ul>
                    <li><a href="#">Urinalysis Reports</a></li>
                    <li><a href="#">DAAR Listing</a></li>
                    <li><a href="#">Laboratory Positive Status Report</a></li>
                    <li><a href="#">Screening Listing</a></li>
                    <li><a href="#">Group Profile</a></li>
                    <ul>
                        <li><a href="#">With Details</a></li>
                        <li><a href="#">Without Details</a></li>
                    </ul>
                    <li><a href="#">Unit Profile</a></li>
                    <li><a href="#">ADMITS User and UIC Listings</a></li>
                    <ul>
                        <li><a href="#">ADMITS User Listing</a></li>
                        <li><a href="#">UIC Listing</a></li>
                    </ul>
                </ul>
                <li><a href="#">USMC</a></li>
                <li><a href="#">STAFF</a></li>
                <li><a href="#">DAPA/UPC</a></li>
            </ul>
            <li><a href="#">DAAR Data</a></li>
            <li><a href="#">Training</a></li>
            <li><a href="#">Edit Unit</a></li>
            <li><a href="#">Screening</a></li>
            <li><a href="#">Facility</a></li>
            <li><a href="#">Treatment</a></li>
            <li><a href="#">Waiver Data</a></li>
            <li><a href="#">New Report - Test</a></li>
            <li><a href="#">UIC Search</a></li>
            <li><a href="#">Spice</a></li>
            <li><a href="#">Breathalyzer</a></li>
        </ul>
    </div>

Do you get any JS errors in your browser console? Would you define 'does not work' in more detail? — halfer, Mar 15 '13 at 13:38
Try adding `runat="server"` to the script tags. See the following post: http://stackoverflow.com/questions/6331023/url-content-in-asp-net-web-forms — Aaron Blenkush, Mar 15 '13 at 13:38
@halfer I do not get any JS errors in my console and when I say does not work. I mean all I get on the page is a normal ul with a tree structure. It looks almost like MVC is not recognizing the JS — Robert, Mar 15 '13 at 13:43
What does the code look like when you view the source in a browser? — Travesty3, Mar 15 '13 at 13:44
Alright. Are the JS assets loading correctly in your browser? Ensure they are being loaded with a 200 HTTP response code - see your "network" tab in your browser developer tools. — halfer, Mar 15 '13 at 13:47
If you're not getting any JS errors, I would think that it is finding the included scripts correctly. Otherwise, you would get an error about the method `dcDrilldown` not existing (provided that that code is actually executing). — Travesty3, Mar 15 '13 at 13:50

Travesty3 · Accepted Answer · 2013-03-15T14:38:38.313

Change

<script src="@Url.Content("~/Scripts/jquery.cookie.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.dcdrilldown.1.2.min.js")"></script>

To

<script src="@Url.Content('~/Scripts/jquery.cookie.js')"></script>
<script src="@Url.Content('~/Scripts/jquery.dcdrilldown.1.2.min.js')"></script>

The extra double quotes around the URL are breaking out of the src attribute quoted string.

UPDATE:

OK, I think I see the problem. Your HTML is invalid. The only direct children of a <ul> element must be <li> elements. Your nested <ul> elements need to be inside the <li> tags. Take a look:

<!-- wrong -->
<ul>
    <li></li>
    <li></li>
    <ul>
        ...
    </ul>
</ul>

<!-- correct -->
<ul>
    <li></li>
    <li>
        <ul>
            ...
        </ul>
    </li>
</ul>

Try this:

<ul id="drilldown">
    <li><a href="#">Record Check</a></li>
    <li><a href="#">Reports/Statistics</a>
        <ul>
            <li><a href="#">USN</a>
                <ul>
                    <li><a href="#">Aclohol Incidents and Status Reports</a>
                        <ul>
                            <li><a href="#">Alcohol Incidents(By FY)</a>
                                <ul>
                                    <li><a href="#">Fiscal Year</a></li>
                                    <li><a href="#">Category</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Alcohol Status Reports</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Urinalysis Reports</a></li>
                    <li><a href="#">DAAR Listing</a></li>
                    <li><a href="#">Laboratory Positive Status Report</a></li>
                    <li><a href="#">Screening Listing</a></li>
                    <li><a href="#">Group Profile</a>
                        <ul>
                            <li><a href="#">With Details</a></li>
                            <li><a href="#">Without Details</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Unit Profile</a></li>
                    <li><a href="#">ADMITS User and UIC Listings</a>
                        <ul>
                            <li><a href="#">ADMITS User Listing</a></li>
                            <li><a href="#">UIC Listing</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">USMC</a></li>
            <li><a href="#">STAFF</a></li>
            <li><a href="#">DAPA/UPC</a></li>
        </ul>
    </li>
    <li><a href="#">DAAR Data</a></li>
    <li><a href="#">Training</a></li>
    <li><a href="#">Edit Unit</a></li>
    <li><a href="#">Screening</a></li>
    <li><a href="#">Facility</a></li>
    <li><a href="#">Treatment</a></li>
    <li><a href="#">Waiver Data</a></li>
    <li><a href="#">New Report - Test</a></li>
    <li><a href="#">UIC Search</a></li>
    <li><a href="#">Spice</a></li>
    <li><a href="#">Breathalyzer</a></li>
</ul>

See update, I am creating an MVC4 app, When I attempt to put single quotes around the ~/Scripts section I get an error that it is a bad compile constant. — Robert, Mar 15 '13 at 13:36
Perhaps that isn't the problem, but as a quick thing to try, you could switch the single and double quotes, so you are using double quotes on the URL and single quotes on the `src` attribute. What does the code look like when you view the source in a browser? — Travesty3, Mar 15 '13 at 13:39
Also, where is that jQuery code placed in your HTML? Is it in the `` or right after the `#drilldown` element? If it's in the ``, you might want to wrap it in a `$(document).on('ready', function() { /* your code here */ });`. — Travesty3, Mar 15 '13 at 13:42
added the document.ready jQuery function and it is in head. Updated question. Still not working however — Robert, Mar 15 '13 at 13:47
When I added the document.ready function I got a JS error: Uncaught Error: Syntax error, unrecognized expression: [object Object][rel="8"] — Robert, Mar 15 '13 at 14:08
@Robert: I think I found the problem. Take a look at my updated answer. — Travesty3, Mar 15 '13 at 14:39

Why is my jQuery drill down menu not working?

1 Answers1