Jquery对话框问题

大家好 我正在开发一个 MVC 应用程序，我想使用 Jquery 对话框。 我有以下情况： 我有 Telerik 树视图，当我单击任何节点时，我希望打开对话框并显示有关该节点的信息。 首先，我添加以下脚本来初始化对话框：

    $(document).ready(function () {
        $("#dialog").dialog("destroy");
        $("#dialog-form").dialog({
            autoOpen: false,
            height: 500,
            width: 500,
            modal: true,
            buttons: {
                Cancel: function () {
                    $(this).dialog('close');
                }
            }
        });
    });

然后在OnSelect（Telerik的客户端事件）中编写以下代码

        $('#dialog-form').dialog('open');
        $('#dialog-form').load('<%= Url.Action("SomeAction", "SomeController") %>');

在我的母版页中，我添加了使模态工作所需的脚本文件，如下所示：

<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.dialog.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.core.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.widget.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.button.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.draggable.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.position.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.resizable.js") %>"></script>

当我单击树的节点时，没有任何反应，chrome 开发人员工具显示以下错误：

未捕获的类型错误：对象#没有方法“对话框”

似乎脚本注册或类似的事情有错误

有任何帮助吗

您需要调整依赖顺序，使其正确，应该是：

<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.core.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.widget.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.mouse.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.draggable.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.button.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.position.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.resizable.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.dialog.js") %>"></script>

注意添加 ui.mouse.

但是......一个更简单的方法是将 jQuery UI 作为单个文件包含，如果您使用所有组件，它会更简单，更容易更新并且 HTTP 请求更少，例如：

<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.ui.js") %>"></script>

您可以在此处将库作为单个文件下载：jQuery UI 下载.

或者来自 CDN，例如来自 Google 的最新版本（截至本回答发布时）：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>

好处（它们与从 CDN 包含 jQuery 本身的好处非常相似）看到这个问题.