繁体   English   中英

关闭“ jQuery UI”选项卡,在对话框按钮上单击

[英]Close Jquery UI tab, on dialog button click

我正在使用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++;}

成功搜索后,它将成功.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:仍然找不到合适的解决方案的运气。 有人要回答还需要其他信息吗? 请让我知道,以便我可以这样做。 基本上希望能够通过单击对话框上的按钮来关闭其中存在对话框的选项卡。

2种方法:

1)将页面加载到新选项卡中之后,在新选项卡中添加一些静态代码。 该代码将与为标签定义的标签“ 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>

;)

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM