对象不支持属性或方法“dialog”

Question

对象不支持属性或方法“dialog”

8

参考AjaxControlToolkit，我从MVC创建了一个UI对话框。

Layout.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

<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 $(...).dialog不是一个函数

而IE则报错：

Object不支持属性或方法 'dialog'

有什么建议吗？

- kk1076

1

为什么你的 Index.cshtml 使用 WebForms 语法？你展示的是一个无效的 Razor 视图。 - Darin Dimitrov

5个回答

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>

- live-love

3

这种情况通常发生在你忘记添加jquery-ui.js时。同时，包含jquery-ui-{version}.js的顺序也很重要！

你应该先包含jquery-{version}.js，然后再包含jquery-ui-{version}.js。最后，在</body>标签之前，包含你的自定义JavaScript文件。

这样可以解决Javascript运行时错误：[对象不支持属性或方法'dialog']，['$'未定义]。

- DevelopZen

感谢您指出顺序的重要性 - 这解决了我的问题。 - EJoshuaS - Stand with Ukraine

1

包括以下三行代码：

<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>

- Willow

1

我认为你的代码没问题。你可以检查一下你的jQuery UI自定义是否包含对话框功能（或者尝试下载完整的jQuery UI进行测试），并检查JS脚本的URI是否正确。

- ngasull

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Darin Dimitrov · Accepted Answer

以下三点可能值得检查：

在 ASP.NET MVC 应用程序中不要硬编码 URL。始终使用 helper（或建议使用的 bundle）：

<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>
}