参考AjaxControlToolkit,我从MVC创建了一个UI对话框。
<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>
我在IE和Firefox中都检查过。 Firefox抛出
Typeerror $(...)。对话框不是函数
IE抛出
对象不支持属性或方法'对话'
有什么建议吗?
答案 0 :(得分:15)
有三件事可能值得一试:
永远不要在ASP.NET MVC应用程序中硬编码URL。始终使用帮助程序(或推荐的程序包):
<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>
请确保在_Layout.cshtml
结束时您没有@Scripts.Render("~/bundles/jquery")
来电,因为这会包含两次jQuery。
如果在_Layout.cshtml
末尾有专门的自定义脚本部分,例如@RenderSection("scripts", required: false)
,请确保已将自定义脚本放在该部分中(请注意,因为此RenderSection在DOM的末尾,您不需要将您的脚本包装在document.ready事件中,因为在执行时,DOM已经被加载了):
<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>
}
答案 1 :(得分:9)
就我而言,这个错误是因为我忘了添加jquery-ui文件引用:
<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>
答案 2 :(得分:3)
当您忘记添加jquery-ui.js
时,通常会发生这种情况。包含jquery-ui-{version}.js
的顺序也很重要!
您应该包括jquery-{version}.js
然后jquery-ui-{version}.js
。然后在</body>
标记之前,包含您的自定义JavaScript文件。
它将解决Javascript运行时错误:[对象不支持属性或方法'对话'],['$'未定义]
答案 3 :(得分:1)
您的代码对我来说似乎没问题。您可以检查您的jQuery UI自定义是否包含对话框功能(或尝试下载full jQuery UI以进行测试)并检查JS脚本的URI是否正确。
答案 4 :(得分:0)
包括以下三行代码:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script>