如何将动态生成的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);
}
});
答
你可以试试这个。
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);
请让我知道如果我失去了一些东西。
朋友们,如果有的话,请提出更好的解决方案。
谢谢。