gpt4 book ai didi

jquery - 对象不支持属性或方法 'dialog'

转载 作者:行者123 更新时间:2023-12-03 22:28:40 24 4
gpt4 key购买 nike

引用 AjaxControlToolkit ,我从 MVC 创建了一个 UI 对话框。

布局.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>

索引.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 is not a function

IE 抛出异常

Object doesn't support property or method 'dialog'

有什么建议吗?

最佳答案

我想到了 3 件可能值得检查的事情:

  1. 切勿在 ASP.NET MVC 应用程序中对 URL 进行硬编码。始终使用助手(或推荐的 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>
  2. 确保在 _Layout.cshtml 末尾没有 @Scripts.Render("~/bundles/jquery")调用,因为这将包含 jQuery 两次。

  3. 如果在 _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>
    }

关于jquery - 对象不支持属性或方法 'dialog',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15679715/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com