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"
});
});
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.)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With