Jquery对话问题

Question

大家好我正在开发一个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开发人员工具显示以下错误:

未捕获的TypeError:对象#没有方法'对话'

似乎脚本注册有错误或类似的东西

对此有任何帮助

Answer 1

您需要调整依赖顺序以使其正确,它应该是:

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

或者来自CDN,例如来自Google的最新消息(截至本答复时):

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

为了获益(它们与CDN中包含jQuery本身的好处非常相似),请参阅此问题.