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

Question

我正在使用 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：仍然找不到合适的解决方案。有人需要回答更多信息吗？请让我知道，以便我可以这样做。基本上希望能够通过单击对话框上的按钮来关闭存在对话框的选项卡。

Answer 1

2 种方法：

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

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

2) 添加到 url tabCounter 并修改 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>

;)

Answer 2

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

万一其他人遇到这个问题，这对我有用。我正在获取打开对话框的活动选项卡，删除删除选项卡的 aria 控件属性，然后删除选项卡内容本身。

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

Close Jquery UI tab, on dialog button click

javascript

jquery

dialog

jquery-ui