webdad3 webdad3 - 14 days ago 7
Javascript Question

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

Answer

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