Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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"
        });
    });
like image 332
webdad3 Avatar asked Mar 23 '23 08:03

webdad3


1 Answers

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

like image 183
McGarnagle Avatar answered Mar 31 '23 16:03

McGarnagle