Click here to Skip to main content
15,902,938 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi,

I have a site which is an ASP.Net MVC3 Web Application. Since I needed sub-menus, I decided to use the SuperFish plugin.

I downloaded the code, and added to my menu the sub-menues using, of course, the ul class="sf-menu".

When I get to me home page (Which is the Index.cshtml), everything is ok (probably since it's my home page and the JavaScripts was loaded once). When I try to load a different page I get an error (Object Expected) on the JQuery function.
If I delete this function, I don't get an error but it's as if the SuperFish CSS file is not loaded and the menu appears as a TreeView.

I tried to google the issue and found some answers in which putting the JQuery function after a PlaceHolder should resolve the problem. I tried and it didn't. Now I get the Object Expected error also when loading my home page.

The code as it is now:
HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    @*<title>@ViewBag.Title</title>*@
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>

    <link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
    
        <script type="text/javascript" src="<%=Url.Content("~/js/jquery-1.2.6.min.js")%>"></script>
        @*<%=ResolveClientUrl("~/js/superfish.js")%>*@

        <asp:ContentPlaceHolder ID="head" runat="server"/>
        <script type="text/javascript" src="<%=Url.Content("~/js/hoverIntent.js")%>"></script>
        <script type="text/javascript" src="<%=Url.Content("~/js/superfish.js")%>"></script>

        <script type="text/javascript">

            jQuery(function () {
                jQuery('ul.sf-menu').superfish();
            });

        </script>
</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <nav>
     <ul class="sf-menu">
      <li class="current">
        <a href="#a">1st menu item</a>
        <ul>
          <li>
            <a href="#aa">menu item 1</a>
          </li>
          <li class="current">
            <a href="#ab">menu item 2</a>
            <ul>
              <li class="current">
                <a href="#">menu item 21</a>
              </li>
            </ul>
          </li>
         </ul>
      </li>
      <li>@Html.ActionLink("About", "About", "Home")</li>
      <li>@Html.ActionLink("Home", "Index", "Home")</li>
    </ul>
            </nav>
        </header>
        <section id="main">
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>


Notes:
1. "js" is a folder which is part of the solution, it is directly under the solution's folder. The css folder is the same.
2. Before the PlaceHolder fix, I also didn't use the "Url.Content". After adding that The error appeared also when loading the home page.
The Code:
HTML
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript">

    jQuery(function () {
        jQuery('ul.sf-menu').superfish();
    });

</script>
Posted

Try this. It works fine.
all SuperFish files are in /superfish/
HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="/superfish/css/superfish.css" media="screen" />
    <script type="text/javascript" src="/superfish/js/hoverIntent.js"></script>
    <script type="text/javascript" src="/superfish/js/superfish.js"></script>
    <script type="text/javascript">

        // initialise plugins
        jQuery(function () {
            jQuery('ul.sf-menu').superfish();
        });

    </script>
</head>
<body>
    <div class="page">
        <header>
        <div id="title">
            <h1>
                My MVC Application</h1>
        </div>
        <div id="logindisplay">
            @Html.Partial("_LogOnPartial")
        </div>
        <nav>
        <ul class="sf-menu">
            <li class="current"><a href="#a">menu item</a>
                <ul>
                    <li><a href="#aa">menu item that is quite long</a> </li>
                    <li class="current"><a href="#ab">menu item</a>
                        <ul>
                            <li class="current"><a href="#">menu item</a></li>
                            <li><a href="#aba">menu item</a></li>
                        </ul>
                    </li>
                    <li><a href="#">menu item</a>
                        <ul>
                            <li><a href="#">menu item</a></li>
                            <li><a href="#">menu item</a></li>
                            <li><a href="#">menu item</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">menu item</a> </li>
            <li><a href="#">menu item</a>
                <ul>
                    <li><a href="#">menu item</a>
                        <ul>
                            <li><a href="#">short</a></li>
                            <li><a href="#">short</a></li>
                        </ul>
                    </li>
                    <li><a href="#">menu item</a>
                        <ul>
                            <li><a href="#">menu item</a></li>
                            <li><a href="#">menu item</a></li>
                            <li><a href="#">menu item</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">menu item</a> </li>
            <li>@Html.ActionLink("Home", "Index", "Home")</li>
            <li>@Html.ActionLink("About", "About", "Home")</li>
        </ul>
           </nav>
        </header>
        <section id="main">
            @RenderBody()
        </section>
         <footer>
        </footer>
    </div>
</body>
</html>
 
Share this answer
 
v2
Thanks

I actually did move the files, but not to this directory but to the directory in which there were already Javascripts (Scripts folder).
I also moved the css file to the Content folder and it worked ! :)

By the way, both folders are default directory, that when you create a new MVC3 Web Application they are created.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900