CODEWITHSUNDEEP
jquery-uijquery
user784637
user784637

Reputation: 16142

How to append dynamically generated ajax content to a newly added tab in jquery ui tabs?

I have a table in the following form on a side-panel:

<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>

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.

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

The title of that row is the search term used in a get request

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

Whenever someone clicks on a row in the table, the new search results replace the old in the #content-display div.

I would like to improve this functionality with jquery ui tabs so that each click on a <tr> 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.

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)?

Here's some sample code of callback function to the add event that adds static content:

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

Upvotes: 0

Views: 1741

Answers (1)

Sasidhar Vanga
Sasidhar Vanga

Reputation: 3404

You can try this.

jQuery UI Tabs support adding new tabs dynamically (you already added code for this).

It provides "add" method to add new items using AJAX

So, if I do this

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

It will load content from "firlename.php" when we click on that tab.

Also, we can select any tab using JavaScript.

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

It will select any tab with the specified index.

In your case, I assume these two will fit nicely.

Example code will be : 

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

You can try this from Google Chrome developer tools' console by going to this URL http://jqueryui.com/demos/tabs/manipulation.html Just add the following code in the console.

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

Please let me know if I am missing something.

Friends, please suggest better solutions if any.

Thanks.

Upvotes: 2

Related Questions