为啥即使包含所有脚本引用,我的 jQuery-UI 对话框也不起作用?

Posted

技术标签:

【中文标题】为啥即使包含所有脚本引用,我的 jQuery-UI 对话框也不起作用?【英文标题】:Why doesn't my jQuery-UI dialog work even though all script references are included?为什么即使包含所有脚本引用,我的 jQuery-UI 对话框也不起作用? 【发布时间】:2019-10-30 15:03:17 【问题描述】:

我有一个 jQuery-UI,它应该充当表格列标题的过滤器。当我将实现编写为单独的 html 文件时,它工作得非常好。

该文件适用于包含的所有脚本标签。这里,下面的ColumnFilters.js是整个过滤框的实现,是一个对话框。

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />



    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/jquery-ui.js"></script>
    <script src="Scripts/jquery-ui.min.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


</head>
<body>
    <style>
        span i.glyphicon.glyphicon-filter 
            visibility: hidden;
        

        span:hover i.glyphicon.glyphicon-filter 
            visibility: visible !important;
        
    </style>
    <script src="ColumnFilters.js"></script>
    <form id="dialog" style="background-color:gainsboro" class="table-bordered">
        <select id="filterclause">
            <option selected>Equals</option>
            <option>Contains</option>
            <option>Does not Contain</option>
            <option>Not Equal to</option>
        </select>
        <div>
            <label for="FirstBox">Field 1</label>
            <input id="FirstBox" />
        </div>

                <!--<button type="submit" class="btn btn-primary">Submit</button>-->

        <div>
           <button class="btn btn-primary" id="ApplyFilter">Apply Filter</button>
            <button class="btn btn-primary" id="ClearFilter">Clear Filter</button>
        </div>
    </form>
     <div class="container">
        <h2>Basic Table</h2>
        <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
        <table class="table table-bordered" id="AddressTable">
            <thead>
                <tr>
                    <th data-filterclause="" data-filtervalue=""><span>Firstname</span>
                        <span style="float:right"><i class="glyphicon glyphicon-filter"></i></span>
                    <!--<span><i class="material-icons">filter_list</i></span>-->
                    </th>
                    <th data-filterclause="" data-filtervalue=""><span>Lastname</span>
                        <span style="float:right"><i class="glyphicon glyphicon-filter"></i></span>
                    </th>
                    <th data-filterclause="" data-filtervalue="">
                        <span>Email</span>
                        <span style="float:right"><i class="glyphicon glyphicon-filter"></i></span>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John</td>
                    <td>Doe</td>
                    <td>john@example.com</td>
                </tr>
                <tr>
                    <td>Mary</td>
                    <td>Moe</td>
                    <td>mary@example.com</td>
                </tr>
                <tr>
                    <td>July</td>
                    <td>Dooley</td>
                    <td>july@example.com</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
</html>

但是当我尝试将相同的实现集成到通过 MVC 框架创建的表中时,它不起作用。以下是 MVC 页面的页面源代码 -

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shared - My ASP.NET Application</title>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/wait.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.6.2.js"></script>

    <script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Scripts/jquery-ui.js"></script>
<script src="/Scripts/jquery-ui.min.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>

     <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>




</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Application name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">Home</a></li>
                    <li><a href="/Home/About">About</a></li>
                    <li><a href="/Home/Contact">Contact</a></li>
                    <li><a href="/Products">Products</a>/li>
                    <li><a href="/Customers">Customers</a>/li>
                    <li><a href="/Addresses/Shared">Addresses</a>/li>
                    <li><a href="/ProductModels">ProductModels</a>/li>
</ul>
            </div>
        </div>
    </div>

    <div class="container body-content">




<script>
    var filterindex = 0;
        $(document).ready(function ()
        
            $("#dialog").dialog(
                autoOpen: false,
                closeOnEscape: true,
                draggable: true,
                title: "Filter Box"
            );
            $(".glyphicon .glyphicon-filter").click(function (e) 
                filterindex = $(event.target).closest('th').index();

                $("#dialog #filterclause").val($("th:eq(" + filterindex + ")").data("filterclause"));
                $("#dialog #FirstBox").val($("th:eq(" + filterindex + ")").data("filtervalue"));
                $("#dialog").dialog(

                    position:  at: "right bottom", my: "left top", of: $(e.target) 
                );
                $("#dialog").dialog("open");
            );
            $("#close").click(function () 

                $("#dialog").dialog("close");
            );

            $("#ApplyFilter").click(function (e) 

                e.preventDefault();

                $("th:eq(" + filterindex + ")").data("filterclause", $("#filterclause").find("option:selected").text());
                $("th:eq(" + filterindex + ")").data("filtervalue", $("#FirstBox").val());
                FilterAddressTable();
            );


            function FilterAddressTable() 

                $("#AddressTable tr").each(function () 

                    $(this).show();
                );

                $("#AddressTable th").each(function () 

                    var headerindex = $(this).index();


                    $(this).closest("table").find("tr:has(td):visible").each(function () 

                        if (!$("th:eq(" + headerindex + ")").data("filtervalue")) 
                            $("th:eq(" + headerindex + ")").find("span:has(i.glyphicon.glyphicon-filter)").find("i.glyphicon.glyphicon-filter").css("visibility", "hidden");
                        
                        else 

                            $("th:eq(" + headerindex + ")").find("span:has(i.glyphicon.glyphicon-filter)").find("i.glyphicon.glyphicon-filter").css("visibility", "visible");

                            switch ($("th:eq(" + headerindex + ")").data("filterclause")) 

                                case "Equals":

                                    if ($(this).find("td:eq(" + headerindex + ")").text() === $("th:eq(" + headerindex + ")").data("filtervalue")) 
                                        $(this).show();
                                    
                                    else 
                                        $(this).hide();
                                    
                                    break;
                                case "Contains":

                                    if ($(this).find("td:eq(" + headerindex + ")").is(":contains(" + $("th:eq(" + headerindex + ")").data("filtervalue") + ")")) 
                                        $(this).show();
                                    
                                    else 
                                        $(this).hide();
                                     break;
                                case "Does not Contain":

                                    if ($(this).find("td:eq(" + headerindex + ")").is(":not(:contains(" + $("th:eq(" + headerindex + ")").data("filtervalue") + "))")) 
                                        $(this).show();
                                    
                                    else 
                                        $(this).hide();
                                     break;
                                case "Not Equal to": if ($(this).find("td:eq(" + headerindex + ")").text() != $("th:eq(" + headerindex + ")").data("filtervalue")) 
                                    $(this).show();
                                
                                else 
                                    $(this).hide();
                                
                                    break;
                            
                        
                    );
                );
            

            $("#ClearFilter").click(function (e) 

                e.preventDefault();

                $("th:eq(" + filterindex + ")").data("filterclause", "");
                $("th:eq(" + filterindex + ")").data("filtervalue", "");
                FilterAddressTable();
            );

            var Options =
                
                    url: "/Addresses/" + "Index",
                    type: "GET"
                ;
            $.ajax(Options).done(function(data)
            

                $("#DynamicView").html(data);

            );
            $(document).ajaxStart(function () 
                $("#ProductsTable").css('visibility', 'hidden');
                $(".signal").css('visibility', 'visible');
            );
            $(document).ajaxComplete(function () 
                $("#ProductsTable").css('visibility', 'visible');
                $(".signal").css('visibility', 'hidden');
            );



        );
    </script>

<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<style>
    span i.glyphicon.glyphicon-filter 
        visibility: hidden;
    
     span:hover i.glyphicon.glyphicon-filter 
        visibility: visible !important;
    
</style>
<div class="signal"></div>
<form id="dialog" style="background-color:gainsboro" class="table-bordered">
    <select id="filterclause">
        <option selected>Equals</option>
        <option>Contains</option>
        <option>Does not Contain</option>
        <option>Not Equal to</option>
    </select>
    <div>
        <label for="FirstBox">Field 1</label>
        <input id="FirstBox" />
    </div>

    <!--<button type="submit" class="btn btn-primary">Submit</button>-->

    <div>
        <button class="btn btn-primary" id="ApplyFilter">Apply Filter</button>
        <button class="btn btn-primary" id="ClearFilter">Clear Filter</button>
    </div>
</form>
<div id="DynamicView">
</div>




        <hr />
        <footer>
            <p>&copy; 2019 - My ASP.NET Application</p>
        </footer>
    </div>



<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    "appName":"Chrome","requestId":"d5fb4162ac90439bb233266c5228c43c"
</script>
<script type="text/javascript" src="http://localhost:3085/335000e36b2e4c7aa1efbc045945ee81/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

在此页面中,表格不可见,因为我正在从另一个 html 加载表格正文。但是,标有id=dialog 的部分应该作为一个对话框工作,并且应该在我单击表头上的图标时打开——这就是我在过滤器图标的单击事件中配置它的方式。它没有打开,我已经尝试了从将 ColumnFilters.js 代码放入正文中到将所有脚本引用放入正文中的所有方法,这些似乎都不起作用。

【问题讨论】:

为什么 jquery 和 jquery min 。还有 ui 和 ui min 。单身就够了。 你可以先修复event.target @Roamer-1888 - event.target 呢?它被用来在点击过滤器图标的地方打开对话框。第一个 html 正在运行。您可以复制整个内容并将其保存为 html 文件,当您在浏览器中打开该文件时,这些功能将起作用。但是为什么不在第二个 html 中呢? @Shree - 是否需要 min 或两者都需要,这真的很令人困惑。所以,出于绝望,我两个都加了。 添加既乱七八糟的东西和代码不能正常工作。只需包含一个就足够了。 【参考方案1】:

这里有一点要看:

$(".glyphicon .glyphicon-filter").click(function(e) 
  filterindex = $(event.target).closest('th').index();
  $("#dialog #filterclause").val($("th:eq(" + filterindex + ")").data("filterclause"));
  $("#dialog #FirstBox").val($("th:eq(" + filterindex + ")").data("filtervalue"));
  $("#dialog").dialog(
    position: 
      at: "right bottom",
      my: "left top",
      of: $(e.target)
    
  );
  $("#dialog").dialog("open");
);

click 回调正在传递 e 但您调用了不存在的 event.target。这应该会导致如下错误:

Uncaught TypeError: Cannot read property 'type' of undefined
    at e.setFieldValue
    at HTMLFormElement.formKeydownListener

首先需要解决这个问题,以确保这不是该功能的阻碍。

其次,项目$(".glyphicon .glyphicon-filter") 似乎不存在。我没有看到包含 .glyphicon-filter.glyphicon 元素作为孩子。我确实看到了$(".glyphicon.glyphicon-filter"),这似乎工作正常。

这是我的测试代码:https://jsfiddle.net/Twisty/oLh5wf2z/9/

JavaScript

var filterindex = 0;
$(function() 
  $("#dialog").dialog(
    autoOpen: false,
    closeOnEscape: true,
    draggable: true,
    title: "Filter Box"
  );
  $(".glyphicon.glyphicon-filter").click(function(e) 
    filterindex = $(e.target).closest('th').index();

    $("#dialog #filterclause").val($("th:eq(" + filterindex + ")").data("filterclause"));
    $("#dialog #FirstBox").val($("th:eq(" + filterindex + ")").data("filtervalue"));
    $("#dialog").dialog(

      position: 
        at: "right bottom",
        my: "left top",
        of: $(e.target)
      
    );
    $("#dialog").dialog("open");
  );
  $("#close").click(function() 

    $("#dialog").dialog("close");
  );

  $("#ApplyFilter").click(function(e) 

    e.preventDefault();

    $("th:eq(" + filterindex + ")").data("filterclause", $("#filterclause").find("option:selected").text());
    $("th:eq(" + filterindex + ")").data("filtervalue", $("#FirstBox").val());
    FilterAddressTable();
  );


  function FilterAddressTable() 

    $("#AddressTable tr").each(function() 

      $(this).show();
    );

    $("#AddressTable th").each(function() 

      var headerindex = $(this).index();


      $(this).closest("table").find("tr:has(td):visible").each(function() 

        if (!$("th:eq(" + headerindex + ")").data("filtervalue")) 
          $("th:eq(" + headerindex + ")").find("span:has(i.glyphicon.glyphicon-filter)").find("i.glyphicon.glyphicon-filter").css("visibility", "hidden");
         else 

          $("th:eq(" + headerindex + ")").find("span:has(i.glyphicon.glyphicon-filter)").find("i.glyphicon.glyphicon-filter").css("visibility", "visible");

          switch ($("th:eq(" + headerindex + ")").data("filterclause")) 

            case "Equals":

              if ($(this).find("td:eq(" + headerindex + ")").text() === $("th:eq(" + headerindex + ")").data("filtervalue")) 
                $(this).show();
               else 
                $(this).hide();
              
              break;
            case "Contains":

              if ($(this).find("td:eq(" + headerindex + ")").is(":contains(" + $("th:eq(" + headerindex + ")").data("filtervalue") + ")")) 
                $(this).show();
               else 
                $(this).hide();
              
              break;
            case "Does not Contain":

              if ($(this).find("td:eq(" + headerindex + ")").is(":not(:contains(" + $("th:eq(" + headerindex + ")").data("filtervalue") + "))")) 
                $(this).show();
               else 
                $(this).hide();
              
              break;
            case "Not Equal to":
              if ($(this).find("td:eq(" + headerindex + ")").text() != $("th:eq(" + headerindex + ")").data("filtervalue")) 
                $(this).show();
               else 
                $(this).hide();
              
              break;
          
        
      );
    );
  

  $("#ClearFilter").click(function(e) 

    e.preventDefault();

    $("th:eq(" + filterindex + ")").data("filterclause", "");
    $("th:eq(" + filterindex + ")").data("filtervalue", "");
    FilterAddressTable();
  );

  var Options = 
    url: "/Addresses/" + "Index",
    type: "GET"
  ;
  $.ajax(Options).done(function(data) 

    $("#DynamicView").html(data);

  );
  $(document).ajaxStart(function() 
    $("#ProductsTable").css('visibility', 'hidden');
    $(".signal").css('visibility', 'visible');
  );
  $(document).ajaxComplete(function() 
    $("#ProductsTable").css('visibility', 'visible');
    $(".signal").css('visibility', 'hidden');
  );
);

更新

请查看:https://www.w3schools.com/cs-s-ref/css_selectors.asp

jQuery 和 CSS 使用选择器来帮助识别对象。

.class1.class2 选择在其类属性中同时设置了 name1 和 name2 的所有元素

.class1 .class2 选择所有名称为 2 且是名称为 1 的元素的后代的元素 希望对您有所帮助。

element&gt;element全选

父元素为元素的元素

希望对您有所帮助。

【讨论】:

首先,感谢您为运行第一个 html 付出的努力。在第二个 html 中,您没有看到任何表格的原因是它的 ajax 加载了内容。事件和 e 部分,它对我不起作用,当我查找解决方案时,建议了事件。显然事件也是一些 jQuery 的东西。但我很确定这不是问题。关于 glyphicon 和 glyphicon-filter ,空格有区别吗?因为我认为 .glyphicon.glphicon-filter 和空格相同是等效的选择器 @GameFromScratch 是的,选择器中的空格有很大的不同。例如,$(".glyphicon .glyphicon-filter")$(".glyphicon.glyphicon-filter")$(".glyphicon &gt; .glyphicon-filter") 在选择元素时各有不同的含义。我将添加更新以帮助解释。 是的,它奏效了。虽然它在 2nd html 中的工作速度较慢,但​​现在对话框即将出现。谢谢。

以上是关于为啥即使包含所有脚本引用,我的 jQuery-UI 对话框也不起作用?的主要内容,如果未能解决你的问题,请参考以下文章

为啥我的脚本返回 0?

未捕获的 TypeError: $(...).autocomplete 不是 JQuery-UI 中的函数

jQuery-UI 在没有 CSS 或自定义的情况下无法在我的用户脚本中工作?

jQuery-UI .dialog("moveToTop") 即使成功运行也会引发错误

为啥 SQL Server 无法识别,即使我有对 DAL05.dll 的引用?

未捕获的TypeError:$(...)。autocomplete不是JQuery-UI中的函数