MVC4 $ is undefined

Question

In Visual Studio 2013 I made a new project based on the default MVC4 Intranet template. In the _Layout.cshtml I added some custom code to add a test link in a div container.

<!DOCTYPE html>
<html lang="en">
<head>
    @Scripts.Render("~/bundles/jquery","~/bundles/modernizr")
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")                   
</head>
<body>
    <header>
        <div class="content-wrapper">
            <div class="float-left">
                <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
            </div>
            <div class="float-right">
                <section id="login">
                   Hello, <span class="username">@User.Identity.Name</span>!
                </section>
                <nav>
                    <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>
                </nav>
            </div>
        </div>
    </header>
    <div id="body">
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix">
            @RenderBody()
        </section>

        <div id="test"></div>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
            </div>
        </div>
    </footer>

    @RenderSection("scripts", required: false)

    <script type="text/javascript">
        $(function () {
            $("#test").append("<a href='#'>test linkje</a>");
        });
    </script>
</body>
</html>

When I press F5 and go into Internet Explorer 10 everything is working fine. The problem starts occuring when a HTML Actionlink is clicked. Then Visual Studio comes in between with the error message:

0x800a1391 - JavaScript runtime error: '$' is undefined

After pressing continue and hitting F5 in the browser its working again. I dont have this problem when running it in Firefox or Chrome. Even when im running it in Chrome or Firefox and I am pasting the url in IE 10 its working fine.

Seems to me running it under IE10 directly messing things up. Hopefully someone has a solution for this strange error, since all the code is just fine.

Thanks in advance.

To clarify, the code is physically working but the debugger just breaks for no apparent reason? In general I haven't had a lot of luck with using Visual Studio for debugging JavaScript. It's getting better in recent versions, but telling it to not break on JavaScript errors and just using browser debugging tools has worked a lot better for me. — David, Mar 18 '14 at 15:28
Yes, the code is working first time it runs under IE 10. When clicking a link the debugger breaks. — user3433740, Mar 18 '14 at 15:34

score 0 · Answer 1 · answered Mar 18 '14 at 15:31

It means that a jQuery function is triggered before jQuery is loaded. Are you sure that all the required scripts are in the bundles you load at the start of the page? Also it's best practice to load your scripts at the end of the page (better performance).

<html>
  <head> ... </head>
  <body>
    ...

    @Scripts.Render("~/bundles/jquery","~/bundles/modernizr")
    @RenderSection("scripts", required: false)
    <script type="text/javascript">
        $(function () {
            $("#test").append("<a href='#'>test linkje</a>");
        });
    </script>
  </body>
</html>

Thijs, I had the scripts at the end of the page (just as the default MVC4 template does). Same problem occured, some solutions said try putting it in the head section. — user3433740, Mar 18 '14 at 15:36

MVC4 $ is undefined

1 Answers1