关闭 Jquery UI 选项卡，单击对话框按钮答案

【问题标题】：Close Jquery UI tab, on dialog button click关闭 Jquery UI 选项卡，单击对话框按钮
【发布时间】：2015-08-07 07:55:54
【问题描述】：

我正在使用 Jquery UI 选项卡。这停留在我的 index.jsp 上，单击搜索按钮会调用以下函数并加载一个选项卡并加载内容。

function addTab(url, title) {
  var id = "tabs-" + tabCounter,
    li = $( tabTemplate.replace( /~\{href\}/g, "#" + id ).replace( /~\{label\}/g, title ) ); tabs.find( ".ui-tabs-nav" ).append( li );
  tabs.append( "<div id='" + id + "'><p></p></div>" );
  $("#" + id).load(url);
  $("#accordion").accordion();
  tabs.tabs( "refresh" );
  tabCounter++;}

在成功搜索时，它会将 success.jsp 呈现到选项卡中。但如果输入无效，我将呈现一个 error.jsp 文件，其中包含以下示例代码。

<body>
<div id="dialog" title="Quick Search">
<p>The entered ID was not found.</p>
</div>
</body>
<script>
$(function () {
$("#dialog").dialog({
buttons: {
          OK: function() {
              $(this).dialog("close");
          }
       }     
});

});
</script>

单击对话框时，我希望它关闭对话框以及它所在的选项卡。我尝试了一些我在网上找到的可能的解决方案，但没有让它起作用。有什么帮助吗？

编辑 1：仍然没有找到合适的解决方案。是否有更多信息需要某人回答？请让我知道，以便我可以这样做。基本上希望能够通过单击对话框上的按钮来关闭存在对话框的选项卡。

【问题讨论】：

你的 Jquery UI Tabs html 是什么？
Jquery UI Tabs 是我使用过的 Jquery UI 的一个小部件。

标签： javascript jquery jquery-ui dialog

【解决方案1】：

两种方法：

1) 在新标签页中加载页面后，在新标签页中添加一些静态代码。此代码将使用为选项卡定义的 tabs-'id' 进行调整。

$("#" + id).load(url)
// something like :
$("#" + id).append('<a href="#" onclick="closetab(' + tabCounter + ')">close this tab</a>')
$("#accordion").accordion();

2) 将 tabCounter 添加到 url 并修改 jsp 页面，以便使用此 tabCounter 自行杀死它。

url += "?"+tabCounter;

服务器返回的新 JPS 页面：

<body>
<div id="dialog" title="Quick Search">
<p>The entered ID was not found.</p>
</div>
</body>
<script>
$(function () {
$("#dialog").dialog({
buttons: {
          OK: function() {
              $(this).dialog("close");

$("#tabs-38457").remove()
tabs.tabs( "refresh" );

          }
       }     
});

});
</script>

;)

【讨论】：

我没有得到你的第一个解决方案。第二种有效，但我不喜欢每次都将值作为参数传递。还有其他方法吗？同样通过这种方法我可以删除标签内容，如何删除标签条目本身？

【解决方案2】：

   var activeTab = tabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" );
    $( "#" + activeTab).remove();
    tabs.tabs( "refresh" );

如果其他人遇到这个问题，这对我有用。我得到了打开对话框的活动选项卡，删除了删除选项卡的 aria 控件属性，然后删除了选项卡内容本身。

【讨论】：