Menu
I want to get a really simple modal dialog running. So following a tutorial I end up with this code:
BundleConfig:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.8.2.min.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-1.8.24.js"));
_Layout:
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</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/jquery")
@Scripts.Render("~/bundles/jqueryui")
</head>
<body>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© @DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
@RenderSection("scripts", required: false)
</body>
and Index:
@section featured {
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>@ViewBag.Title.</h1>
<h2>@ViewBag.Message</h2>
</hgroup>
<script type="text/javascript">
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#create-user" )
.button()
.click(function() {
$( "#dialog-form" ).dialog( "open" );
});
</script>
<div style="float: left; width: 250px;">
<button id="create-user">Create new user</button>
</div>
</div>
</section>
}
However when I run it I end up with 0x800a1391 - JavaScript runtime error: 'jQuery' is undefined, inside the jquery-ui library. If I simply put the code in an html page it works as expected. So the problem comes from the MVC project. I am using visual studio 2012 on Windows 8. Any thoughts?
291
By default, the MVC bundler ignores files with .min in the filename.
Use the un-minified version of jQuery to fix the problem (or just rename the file) - when deployed, the bundler will minify the jQuery file anyway.
Update
You can change this behavior by clearing the IgnoreList in the RegisterBundles method (but I recommend sticking with the defaults and simply renaming the files):
// Clear all items from the ignore list to allow minified CSS and JavaScript
// files in debug mode
bundles.IgnoreList.Clear();
// Add back the default ignore list rules sans the ones which affect minified
// files and debug mode
bundles.IgnoreList.Ignore("*.intellisense.js");
bundles.IgnoreList.Ignore("*-vsdoc.js");
bundles.IgnoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);
See more in the Telerik docs.
128
IE has an other syntax-checking in javascript, than Edge, Chrome and Firefox. I got same error in my code, when the BundleOptimization was turned on in my MVC application. I use AngularJS as framework, and one line screwed up the whole bundle, and made an cascading effect:
$http.post('/controller/action', { dto })
Removing the curly brackets {} - solved my 'missing JQuery-problem'. But that I first found by debugging in the IE (pressing F8 in debug-mode):
The JQuery-error message is misleading, but the syntax-error refers to the right line, so I could fix the error.
40
The problem I ran into when getting this error was due to the fact that the following statements were not in the <head> of the document, but just before the </body> tag at the end of the document.
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/bootstrap")
Once I moved them to the <head> of my .cshtml file, everything worked fine.
10
Just use @section scripts around your scripts like so
@section scripts
{
<script>
$(function () {
});
});
</script>
}
I struggled with this one for about an hour, almost all the solutions come down to the order and method which you call your scripts. I found the bundlers were causing problems (for me it was the ui bundler)
Here is the order which worked for me.
<script src="/Scripts/modernizr-2.5.3.js"></script>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/bundles/jquery-ui"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
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
