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

有两种方法：

1）在新选项卡中加载页面后，在新选项卡中添加一些静态代码。此代码将根据标签进行调整 - ＆＃39; id＆＃39;为标签定义。

$("#" + 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>

）

Answer 2

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

如果其他人遇到这个问题，这对我有用。我正在打开对话框的活动标签，删除删除标签的aria controls属性，然后删除标签内容本身。

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

2 个答案: