与 jquery tablesorter pager JavaScript 运行时错误一起使用时，jquery 对话框中的错误：对象不支持属性或方法“对话框”

Question

我在 Area = "PrivateCEQRApplication" 中有一个管理屏幕。我在该页面中使用 Jquery 表排序器 (http://tablesorter.com/docs/) 和 jquery 对话框 (https://jqueryui.com/dialog/#default)。我正在使用 MVC4 和剃须刀。

我的看法是

@model CEQRApplication.Areas.PrivateCEQRApplication.Models.CEQRUser

@{
    ViewBag.Title = "AdminPage";
    Layout = "~/Views/Shared/_LogoutLayout.cshtml";
}

<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/jquery-ui.css")" />
<script src="@Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>


<script src="@Url.Content("~/Scripts/jquery-latest.js")" type="text/javascript">   </script>
<script src="@Url.Content("~/Scripts/jquery.tablesorter.mod.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"></script>


<script type="text/javascript">
    $(document).ready(function (event) {

    $(".tablesorter")
            .tablesorter({
                widthFixed: true,
                cssChildRow: "expand-child",
                widgets: ["zebra"],
                headers: { 0: { sorter: false } }
                , onRenderHeader: function () {
                    this.wrapInner("<span></span>");
                }
                , debug: false
            })
            .tablesorterPager({
                positionFixed: false,
                container: $("#pager")
            })
            .bind('pagerChange', function () {
                $('.expand-child td').hide();
            });      


    $('.buttonsAddUser').click(function (event) {

        $("#editResult").dialog({
            title: 'Add User',
            autoOpen: false,
            resizable: false,
            height: 500,
            width: 650,
            show: { effect: 'drop', direction: "up" },
            modal: true,
            draggable: true,
            open: function (event, ui) {
                $(".ui-dialog-titlebar-close").hide();
                $(this).load('@Url.Action("AddUser", "Admin")');
            },
            close: function (event, ui) {
                $(this).dialog('close');
            }
        });

        $("#editResult").dialog('open');

        return false;
    });    

 });
</script>

用于渲染对话框的按钮和 div

<td style="padding-left:30px;">
    <div class="buttonsAddUser">
        <img src="@Href("~/Content/themes/base/Images/add-users.png")" style="height: 2.0em; width: 3.0em; vertical-align:middle; display:inline-block; cursor:pointer;" id="AddRow" alt="Add User" title="Add User" />
         Add New User
     </div>
</td>
<div id="editResult" title="Edit User">
</div>

现在的问题是当我只在页面上使用这些脚本并删除表格排序器时

<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/jquery-ui.css")" />
<script src="@Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>

对话作品

当我只在页面上使用这些脚本并删除对话框时

<script src="@Url.Content("~/Scripts/jquery-latest.js")" type="text/javascript">   </script>
<script src="@Url.Content("~/Scripts/jquery.tablesorter.mod.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"></script>

分拣机工作

但如果我将 j-query 脚本用于排序器和对话对话框，则会引发错误

** 0x800a01b6 - JavaScript 运行时错误：对象不支持属性或方法“对话框”**

我正在使用依赖于 jquery.js 文件的 tablesorter.js。模态对话框也依赖于 jquery-1.9.1.js。由于 2 个 jquery 不能在同一个模板上，我怎样才能让 tablesorter.js 和 jquery 对话框一起工作？有什么办法可以解决这个问题，我将非常感谢您的帮助。

另外，我对捆绑的概念不是很清楚。因此，如果我想捆绑上面显示的脚本，我将如何做。

谢谢

Answer 1

您加载了 2 个版本的 jQuery（1.9.1 和 latest）。

<script src="@Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-latest.js")" type="text/javascript">   </script>

jQuery UI 在第一个之后加载，并附加到该 jQuery 实例。当您加载第二个 jQuery 时，您实际上是在丢弃第一个以及附加到它的任何插件。

选择一个适用于 jQuery UI 和排序器的 jQuery 版本，并确保 jQuery 脚本是您加载的第一个脚本，并且对话框和排序器都应该工作。比如……

<script src="@Url.Content("~/Scripts/jquery-latest.js")" type="text/javascript">   </script>
<script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.tablesorter.mod.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"></script>

--- 更新---

由于您似乎需要不同版本的 jQuery...一种用于 jQuery UI (1.9.1) 和一种用于排序器（1.4.x，在 jquery-latest.js 中），您将不得不做这样的事情......

<script src="@Url.Content("~/Scripts/jquery-latest.js")" type="text/javascript">   </script>
<script src="@Url.Content("~/Scripts/jquery.tablesorter.mod.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>

<script type="text/javascript">
    $oldJQuery = $.noConflict();
    // $ is now 1.9.1, $oldJQuery is the first jQuery that was loaded ("latest")
</script>
<script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>

任何需要访问表格排序插件的地方，都需要使用$oldJQuery，否则就使用$...

<script type="text/javascript">
$(document).ready(function (event) {

    $oldJQuery(".tablesorter")
            .tablesorter({
                widthFixed: true,
                cssChildRow: "expand-child",
                widgets: ["zebra"],
                headers: { 0: { sorter: false } }
                , onRenderHeader: function () {
                    this.wrapInner("<span></span>");
                }
                , debug: false
            })
            .tablesorterPager({
                positionFixed: false,
                container: $("#pager")
            })
            .bind('pagerChange', function () {
                $('.expand-child td').hide();
            });      


    $('.buttonsAddUser').click(function (event) {

        $("#editResult").dialog({
            title: 'Add User',
            autoOpen: false,
            resizable: false,
            height: 500,
            width: 650,
            show: { effect: 'drop', direction: "up" },
            modal: true,
            draggable: true,
            open: function (event, ui) {
                $(".ui-dialog-titlebar-close").hide();
                $(this).load('@Url.Action("AddUser", "Admin")');
            },
            close: function (event, ui) {
                $(this).dialog('close');
            }
        });

        $("#editResult").dialog('open');

        return false;
    });    

});
</script>