jQuery 对象不支持属性或方法“对话框”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15679715/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Object doesn't support property or method 'dialog'
提问by kk1076
Refering the AjaxControlToolkit, I created a UI dialog from MVC.
参考AjaxControlToolkit，我从 MVC 创建了一个 UI 对话框。
Layout.cshtml
布局.cshtml
<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>
Index.cshtml
索引.cshtml
<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
我在 IE 和 Firefox 中都检查过。火狐抛出
Typeerror $(...).dialog is not a function
类型错误 $(...).dialog 不是函数
IE throws
IE 抛出
Object doesn't support property or method 'dialog'
对象不支持属性或方法“对话框”
Any suggestions?
有什么建议？
回答by Darin Dimitrov
3 things come to mind that might be worth checking:
想到 3 件事可能值得检查：
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.cshtmlyou don't have a@Scripts.Render("~/bundles/jquery")call because this would include jQuery twice.If at the end of your
_Layout.cshtmlyou 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> }
永远不要在 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> }
回答by live-love
In my case, this error was because I had forgotten to add the jquery-ui file reference:
就我而言，此错误是因为我忘记添加 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>
回答by DevelopZen
This commonly happens when you forget to add jquery-ui.js. The order of including jquery-ui-{version}.jsalso matters!
当您忘记添加jquery-ui.js. 包含的顺序jquery-ui-{version}.js也很重要！
You should include jquery-{version}.jsthen jquery-ui-{version}.js. Then just before </body>tag, include your custom javascript file.
你应该包括jquery-{version}.jsthen jquery-ui-{version}.js。然后在</body>标记之前，包含您的自定义 javascript 文件。
It will solve Javascript runtime error: [Object doesn't support property or method 'dialog'],['$' is undefined]
它将解决Javascript运行时错误：[对象不支持属性或方法'对话框']，[ '$'未定义]
回答by Willow
Include these three lines of code:
包括这三行代码：
<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>
回答by ngasull
Your code seems OK to me. You could check that your jQuery UI custom contains dialog feature (or try downloading full jQuery UIfor testing purposes) and check that the URI to the JS script is correct.
你的代码对我来说似乎没问题。您可以检查您的 jQuery UI 自定义是否包含对话框功能（或尝试下载完整的 jQuery UI以进行测试）并检查 JS 脚本的 URI 是否正确。
