为啥即使包含所有脚本引用，我的 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>© 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>element全选父元素为元素的元素
希望对您有所帮助。
【讨论】：
首先，感谢您为运行第一个 html 付出的努力。在第二个 html 中，您没有看到任何表格的原因是它的 ajax 加载了内容。事件和 e 部分，它对我不起作用，当我查找解决方案时，建议了事件。显然事件也是一些 jQuery 的东西。但我很确定这不是问题。关于 glyphicon 和 glyphicon-filter ，空格有区别吗？因为我认为 .glyphicon.glphicon-filter 和空格相同是等效的选择器 @GameFromScratch 是的，选择器中的空格有很大的不同。例如，$(".glyphicon .glyphicon-filter")、$(".glyphicon.glyphicon-filter") 和 $(".glyphicon > .glyphicon-filter") 在选择元素时各有不同的含义。我将添加更新以帮助解释。
是的，它奏效了。虽然它在 2nd html 中的工作速度较慢，但现在对话框即将出现。谢谢。以上是关于为啥即使包含所有脚本引用，我的 jQuery-UI 对话框也不起作用？的主要内容，如果未能解决你的问题，请参考以下文章
未捕获的 TypeError: $(...).autocomplete 不是 JQuery-UI 中的函数
jQuery-UI 在没有 CSS 或自定义的情况下无法在我的用户脚本中工作？
jQuery-UI .dialog("moveToTop") 即使成功运行也会引发错误