Menu
Refering the AjaxControlToolkit, I created a UI dialog from MVC.
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="../../Content/smoothness/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.10.2.custom.min.js" type="text/javascript"></script>
<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")
</head>
<h2>jQuery UI Hello World</h2>
<button id="show-dialog">Click to see jQuery UI in Action</button>
<div id="dialog" title="jQuery UI in ASP.NET MVC" >
<p>You now have the power of ASP.NET, the simplicity of client-side scripting with jQuery, and the looks of jQuery UI. Congrats, web slinger!</p>
</div>
<script language="javascript" type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function () { $(this).dialog("close"); },
"Cancel": function () { $(this).dialog("close"); }
}
});
$("#show-dialog").button().click(function () {
$('#dialog').dialog('open');
return false;
});
});
</script>
I checked both in IE and Firefox. Firefox throws
Typeerror $(...).dialog is not a function
IE throws
Object doesn't support property or method 'dialog'
Any suggestions?
710
3 things come to mind that might be worth checking:
Never hardcode urls in an ASP.NET MVC application. Always use helpers (or bundles which are recommended):
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/Content/smoothness/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.10.2.custom.min.js" type="text/javascript"></script>
<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")
</head>
Make sure that at the end of your _Layout.cshtml you don't have a @Scripts.Render("~/bundles/jquery") call because this would include jQuery twice.
If at the end of your _Layout.cshtml you have a dedicated section for custom scripts like @RenderSection("scripts", required: false), make sure that you have placed your custom script in that section (notice that since this RenderSection is at the end of the DOM you don't need to be wrapping your script in a document.ready event because by the time it executes, the DOM will already be loaded):
<h2>jQuery UI Hello World</h2>
<button id="show-dialog">Click to see jQuery UI in Action</button>
<div id="dialog" title="jQuery UI in ASP.NET MVC" >
<p>You now have the power of ASP.NET, the simplicity of client-side scripting with jQuery, and the looks of jQuery UI. Congrats, web slinger!</p>
</div>
@section scripts {
<script type="text/javascript">
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function () { $(this).dialog("close"); },
"Cancel": function () { $(this).dialog("close"); }
}
});
$("#show-dialog").button().click(function () {
$('#dialog').dialog('open');
return false;
});
});
</script>
}
In my case, this error was because I had forgotten to add the jquery-ui file reference:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js" type="text/javascript"></script>
This commonly happens when you forget to add jquery-ui.js. The order of including jquery-ui-{version}.js also matters!
You should include jquery-{version}.js then jquery-ui-{version}.js. Then just before </body> tag, include your custom javascript file.
It will solve Javascript runtime error: [Object doesn't support property or method 'dialog'],['$' is undefined]
3
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
