jqueryのuiタブの新しく追加されたタブに動的に生成されたajaxコンテンツを追加する方法は？

Question

Iはサイドパネルに次の形式のテーブルを有する：

<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'));   
}); 

その行のタイトルは、誰かがテーブルの行をクリックするたびに、新しい検索結果が#content-displayのdivに古いものを置き換えるget要求

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

で使用される検索用語です。

jquery UIでこの機能を改善して、<tr>要素をクリックするたびに、新しい検索が実行されるたびに既存の検索結果を置き換えるのではなく、それらの検索結果を含む新しいタブが作成されます。

動的に生成された検索クエリのコンテンツ（search.php？term = dynamicString）を追加するために、コールバック関数をaddイベントに書き込むにはどうすればよいですか？

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);      
    } 
}); 

Answer 1

あなたはこれを試すことができます。

は、ここで静的なコンテンツを追加するaddイベントへのコールバック関数のいくつかのサンプルコードです。

jQuery UIタブでは、新しいタブを動的に追加することができます（このためのコードは既に追加済みです）。

それは私がこの

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

をすれば、我々は、そのタブをクリックしたときには、「firlename.php」からコンテンツをロードしますので、AJAX

を使用して新しいアイテムを追加する方法を「追加」を提供します。

また、JavaScriptを使用して任意のタブを選択できます。

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

指定されたインデックスのタブを選択します。

あなたの場合、私はこれらの2つがきちんと合うと思います。

例のコードは次のようになります。

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

あなただけのコンソールに次のコードを追加します。このURL http://jqueryui.com/demos/tabs/manipulation.html に移動して、Google Chromeのデベロッパーツールのコンソールからこれを試すことができます。

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

何か不足している場合は教えてください。

友だちの場合は、より良い解決策を提案してください。

ありがとうございました。