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>

当我点击树的节点时，没有发现任何铬开发工具显示以下错误：

未捕获的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本身的好处非常相似）see this question。

Answer 2

问题解决了...... 如果要在视图中使用Telerik组件，则需要使用脚本管理器注册脚本，如下所示：

<% Html.Telerik().ScriptRegistrar().DefaultGroup(group => group
   .Add("jquery-1.4.2.js")
   .Add("jquery.ui.core.js")
   .Add("jquery.ui.widget.js")
   .Add("jquery.ui.mouse.js")       
   .Add("jquery.ui.draggable.js")
   .Add("jquery.ui.button.js")       
   .Add("jquery.ui.resizable.js")
   .Add("jquery.ui.dialog.js")
   .Add("jquery.ui.position.js")

）;
％GT;

此致

Jquery对话问题

2 个答案: