CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc
webdad3
webdad3

Reputation: 9080

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

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"
        });
    });

Upvotes: 4

Views: 24045

Answers (3)

user2216667
user2216667

Reputation: 31

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>

Upvotes: 0

lukiller
lukiller

Reputation: 1207

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")

Upvotes: 2

McGarnagle
McGarnagle

Reputation: 102743

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.)

Upvotes: 5

Related Questions