如何将动态生成的ajax内容追加到jquery ui选项卡中新添加的选项卡？

我有一个表在一个侧板上的形式如下：如何将动态生成的ajax内容追加到jquery ui选项卡中新添加的选项卡？

<table> 
<tr title='term1'><td>one</td></tr> 
<tr title='term2'><td>two</td></tr> 
<tr title='term3'><td>three</td></tr> 
<tr title='term4'><td>four</td></tr> 
</table>

当用户点击该列的行，该行的标题被作为参数传递给它显示搜索的功能通过导致主面板。

$("#content-display").on('click', 'tr', function(){  
    searchResults($(this).attr('title'));   
});

该行的标题是GET请求

function searchResults(searchTerm){  
    $.ajax({ 
     url: "search.php", 
     data: {term: searchTerm}, 
     success: function(data){  
      $("#content-display").html(data); 
     }, 
     dataType: 'html' 
    });  
}

每当有人点击该表中的行使用的搜索词，新的搜索结果替换旧的#content-display DIV。

我想用jquery ui选项卡改进此功能，以便每次单击<tr>元素时都会创建一个新选项卡，其中包含搜索结果，而不是在每次新搜索完成时替换现有搜索结果。

如何将回调函数写入add事件，以便它追加动态生成的搜索查询内容（search.php？term = dynamicString）？

这里的回调函数的一些示例代码，增加了静态内容的加载事件：

var $tabs = $("#tabs").tabs({ 
    tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>", 
    add: function (event, ui){ 
     var tab_content = "testing"; 
     $(ui.panel).append(tab_content);      
    } 
});

来源

2012-02-17 user784637

你可以试试这个。

jQuery UI选项卡支持动态添加新选项卡（您已经为此添加了代码）。

它提供了“添加”的方法来添加新项目使用AJAX

所以，如果我这样做

$("#tabs").tabs("add", "filename.php", "Search Heading");

当我们单击该选项卡上，将负载从“firlename.php”的内容。

此外，我们可以选择使用JavaScript的任何选项卡。

$('#tabs').tabs('select', tab_index);

它将选择具有指定索引的任何选项卡。

在你的情况下，我认为这两个很合适。

示例代码将是：

$("#tabs").tabs("add", "search.php?term=" + search_var, search_var); 
$('#tabs').tabs('select', last_index);

您可以前往以下网址 http://jqueryui.com/demos/tabs/manipulation.html 只需在控制台中添加以下代码从谷歌Chrome开发者工具的控制台中试一下。

$("#tabs").tabs("add", "collapsible.html", "Collapsible"); $('#tabs').tabs('select', 1);

请让我知道如果我失去了一些东西。

朋友们，如果有的话，请提出更好的解决方案。

谢谢。

来源

2012-02-17 05:31:27

如何将动态生成的ajax内容追加到jquery ui选项卡中新添加的选项卡？

回答

相关问题