JavaScript runtime error: '$' is undefined - using MVC 4

Question

In my _Layout.cshtml I have the following:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Intranet Ads</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        <script type="text/javascript">
            function search() {
                var searchVal = $('#txtSearchString').val();
                $('#adResults #summary').each(function () {
                    if (searchVal == '') {
                        $(this).parent().show();
                    } else {
                        $(this).not(':contains(' + searchVal + ')').parent().hide();
                    }
                });
            }

        function openEditAd(val) {
            if (val != 'admin') {
                $("#edit-content,#edit-background").toggleClass("active");
                $("#txtConfirmationEdit").text = "";
            } else {
                $("#edit-content-admin,#edit-background-admin").toggleClass("active");
                $("#txtConfirmationEdit").text = "";
            }
        }

        function closeEditAd(permission) {
            if (permission != 'admin') {
                if ($("#txtConfirmationEdit").val().trim() != "") {
                    var url = '@Url.Action("Edit", new { id = "__id__" })';
                    window.location.href = url.replace('__id__', $("#txtConfirmationEdit").val());
                }

                $("#edit-content,#edit-background").toggleClass("active");
            } else {
                if ($("#txtConfirmationAdmin").val().trim() != "") {
                    var url = '@Url.Action("Edit", new { id = "__id__" })';
                    window.location.href = url.replace('__id__', $("#txtConfirmationAdmin").val());
                }

                $("#edit-content-admin,#edit-background-admin").toggleClass("active");
            }
        }

        $(document).ready(function () {
            // Handler for .ready() called.
            console.log("hi");
        });


    </script>
</head>
<body>
...
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>

I just added the:

        $(document).ready(function () {
            // Handler for .ready() called.
            console.log("hi");
        });

To the end as I'm trying to implement a datepicker but I'm getting the

JavaScript runtime error: '$' is undefined

As you can see in my other functions I am using jQuery commands... What is the reason for this?

I was getting the exact same error when I had this in as well:

$(document).ready(
    function () {
        $('.datepicker').datepicker({
            changeMonth: true,
            changeYear: true,
            minDate: "-99Y",
            dateFormat: "dd/mm/yyyy"
        });
    });

McGarnagle · Accepted Answer · 2013-09-20 21:57:17Z

5

You have to put the JQuery reference first, at the top of the page. Browsers load script tags synchronously, so if you try to reference JQuery's $ before loading the JQuery source, then you'll get an "undefined" error.

Actually, since script tags block the rest of the page from loading, it might be better to instead put your other script tags at the bottom, underneath the JQuery reference. This allows the browser to load and display your page markup first, before loading the scripts. (This can give the impression of a faster page load.)

answered Sep 20, 2013 at 21:57

McGarnagle

103k31 gold badges235 silver badges264 bronze badges

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

6 Comments

webdad3 Over a year ago

How can I tell? I'm using the ASP MVC 4 template. I don't see a script tag like in normal web pages.

sbugert Over a year ago

Well, then place your script after @Scripts.Render("~/bundles/jquery") in the body

webdad3 Over a year ago

hmmm... That didn't work. I got the same error. In the output window I'm seeing the following: 0x800a139e - JavaScript runtime error: SyntaxError Exception was thrown at line 5303, column 7 in localhost:6281/Scripts/jquery-1.8.2.js

McGarnagle Over a year ago

@webdad3 The JQuery script is throwing the error? That's pretty strange. What's happening at line 5303?

webdad3 Over a year ago

@McGarnagle - You were right. I just wasn't seeing what you were talking about until today! Thanks for your help

|

lukiller · Accepted Answer · 2016-11-22 23:00:53Z

2

I faced the same issue. Open Views\Shared_Layout.cshtml and move the following script registration's sentences from the bottom of the body section, to the head section:

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/bootstrap")

answered Nov 22, 2016 at 23:00

lukiller

1,21711 silver badges12 bronze badges

1 Comment

Craig Over a year ago

This fixes my problem, but why does the default Visual Studio _Layout.cshtml file have it at the bottom of the body section? Won't it be an issue for everyone?

user2216667 · Accepted Answer · 2018-03-29 13:00:44Z

0

try referencing them directly ie:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

edited Mar 29, 2018 at 13:00

answered Mar 29, 2018 at 12:53

user2216667

313 bronze badges

Collectives™ on Stack Overflow

JavaScript runtime error: '$' is undefined - using MVC 4

3 Answers 3

6 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Linked

Related