title: How to append dynamically generated ajax content to a newly added tab in jquery ui tabs?
body: <p>I have a table in the following form on a side-panel:</p>
  
  <pre><code>&lt;table&gt;
  &lt;tr title='term1'&gt;&lt;td&gt;one&lt;/td&gt;&lt;/tr&gt;
  &lt;tr title='term2'&gt;&lt;td&gt;two&lt;/td&gt;&lt;/tr&gt;
  &lt;tr title='term3'&gt;&lt;td&gt;three&lt;/td&gt;&lt;/tr&gt;
  &lt;tr title='term4'&gt;&lt;td&gt;four&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>When someone clicks on a row of that column, the title of that row is passed as an argument to a function which displays the search results in the main-panel.</p>
  
  <pre><code>$("#content-display").on('click', 'tr', function (){      
      searchResults($(this).attr('title'));        
  });
  </code></pre>
  
  <p>The title of that row is the search term used in a get request</p>
  
  <pre><code>function searchResults(searchTerm){    
      $.ajax({
        url: "search.php",
        data: {term: searchTerm},
        success: function(data){     
              $("#content-display").html(data);
        },
        dataType: 'html'
      });     
  }
  </code></pre>
  
  <p>Whenever someone clicks on a row in the table, the new search results replace the old in the <code>#content-display</code> div.</p>
  
  <p>I would like to improve this functionality with jquery ui tabs so that each click on a <code>&lt;tr&gt;</code> element would create a new tab with those search results inside of it instead of replacing the existing search results whenever a new search is done.</p>
  
  <p>How can I write the callback function to the add event so that it would append the dynamically generated content of the search query (search.php?term=dynamicString)?</p>
  
  <p>Here's some sample code of callback function to the add event that adds static content:</p>
  
  <pre><code>var $tabs = $("#tabs").tabs({
      tabTemplate: "&lt;li&gt;&lt;a href='#{href}'&gt;#{label}&lt;/a&gt; &lt;span class='ui-icon ui-icon-close'&gt;Remove Tab&lt;/span&gt;&lt;/li&gt;",
      add: function (event, ui){
          var tab_content = "testing";
          $(ui.panel).append(tab_content);                      
      }
  });
  </code></pre>