Refresh tab content on click in JQuery UI Tabs

Question

Content of TAB1 is loaded by ajax from remote url. When TAB1 is selected, I have to switch to TAB2 and then back to TAB1 to refresh the loaded content.

How to make TAB1 refresh loaded content when click on its tab?

Edit: HTML code is as below

<div id="tabs">
    <ul>
        <li><a href="url1">Tab1</a></li>
        <li><a href="url2">Tab2</a></li>
    </ul>
</div>
<script type="text/javascript"> 
    $(document).ready(function(){
        $tabs = $("#tabs").tabs({
            select: function(event, ui) {
                $('a', ui.tab).click(function() {
                    $(ui.panel).load(this.href);
                    return true;
                });
            }
        });
});
</script>

Quoth

It would be great if one of the answers had been flagged as the one that worked. – Vieva

Answer 1

Another simple way to refresh a tab in jQuery is to use the load method:

$('#my_tabs').tabs('load', 0);

The numeric value is the zero based index of the tab you wish to refresh.

Inhabit

Answer 2

1) When defining your tabs that load ajax content, make sure to use a title attribute, which puts that value into the loaded div's id. In my case the title was "alert-tab". Otherwise the jquery generated div has an arcane id:

<li><a href="/alert/index" title="alert-tab">Alert</a></li>

2) Now use this inside whatever event you want to reload the tab:

var href = "/alert/index/";  
$("#alert-tab").load(href);

Foliaceous

IDs of automatically created tab panels are determined by the value of the aria-controls attribute on the <li>, these days. – Maggee

Answer 3

You can simply remove the content of the tab that was clicked and reload it with the same content (or anything you want). For instance:

$( "#tabs" ).tabs({                                                                  
  activate:function(event,ui){ 
    //Remove the content of the current tab
    ui.newPanel.empty();
    //load the file you want into current panel
    ui.newPanel.load('content'+(ui.newTab.index()+1)+'.php');                                                 
  }                                                                          
});

In this case, for example if the second tab is clicked, the panel is emptied and reloaded with content2.php

Bricklayer

Answer 4

Here's how I did it. One thing to note is that I have found the IDs assigned to the DIVs rendering each tab's content to be named pretty predictably, and to always correspond with the href of the anchor in the selected tab. This solution depends on that being the case, so it could be criticized as "too brittle" I suppose. The form I'm pulling the code from is a sort of re-usable control that may or may not be hosted within a tab, so that's why I check the value of parentID before doing the .each().

//I get the parentID of the div hosting my form and then use it to find the appropriate anchor.
var parentID = '#' + $('#tblUserForm').parent().attr('id');
//Trying to enable click on an already selected tab.
if(parentID == '#ui-tabs-3') //The value of var parentID
{
     $('#tabs a').each(function() {
          if($(this).attr('href') == parentID)
          {
              $(this).bind('click', function() {  
                  $(parentID).load(your_URL_here);
              });
          }
    });
}

Stochastic

Answer 5

struggled with this issue because the tabs seem to kill click events... so i just used mousedown.

$("#tabs ul.ui-widget-header")
 .delegate("li.ui-tabs-selected","mousedown",function(){
   $tabs.tabs("load",$(this).index());
 });

this question was posted a while ago, but i hope it helps someone.

Carbonari

You can use .on() instead of .delegate() as of v1.7 – Aircool

Answer 6

I had the same problem with some ajax content in a jQuery tab.

The tab loads a flot graph but it would work only when it was the tab you loaded first.

I fixed this with a kind of cheesy work around but it was effective.

I took all of my flot js code and dumped it into a separate .js file and put it in a function

function doFlotGraph(data){
    $.plot({plotcode});
};

I then did the following within the tab

$.getScript('url/doFlotGraph.js',function(){
    doFlotGraph(data);
});

This allowed flot to do its thing since the document ready in the tab had already finished by the time the ajax $.getScript was activated.

You could then put the ajax within a .click for that tab.

Wendalyn

Answer 7

To do this right you just need to save global link during creation:

ui_tabs = $( "#tabs" ).tabs();

After all can use it involving API load

For example: transform all links on the page sections of tabs

$('#tabs .paging a').click(function(e){
    var selected = ui_tabs.tabs('option', 'selected');
    ui_tabs.tabs('url', selected, e.target.href);
    ui_tabs.tabs('load', selected);
    return false;
})

Gnathous

Answer 8

Ok putting things together I have this for the click event of the jquery tabs, the surrounding div has an id of tabs, like this:

<div id="tabs">

The following gets executed in the document ready function:

 $('#tabs > ul > li > a').each(function (index, element) {
    $(element).click(function () {         
        $('#tabs').tabs('load', index); 
    });

It registers for every tab the click event, with the index of the tab thanks to Scott Pier

I also have this in my document ready to prevent caching

 $("#tabs").tabs({
    ajaxOptions: {
        cache: false,
        error: function (xhr, status, index, anchor) {
            $(anchor.hash).html(
      "Couldn't load this tab. We'll try to fix this as soon as possible. " +
      "If this wouldn't be a demo.");
        }
    }
});

Gloria

Answer 9

On the "success" of the jQuery call, you can replace the html with the new html.

You have'nt posted any code so you may already be doing this but;

success: function(msg) {
    $('.TabOne').html(msg);
}

the above works if you are returning html. If you are returning an object then you may need to do extra work but by and large the above should work.

Edit I should mention also that .TabOne is a class name. So your tab content holder must have a class of TabOne for the above code to work.

Remember that the class name doesn't have to actually exist as a style for this to work either.

Edit 2

Hmmm, I see what you are trying to do now and I'm at a bit of a loss. Will do some testing and might be able to get back to you.

Sorry.

Oria

where to put this code? i dont have a TabOne class. Please refer to the HTML code added above. – Quoth

Answer 10

I know this link is old, but I ran into the same situation. I tried to understand and incorporate all that was stated here, but it still was not working or it would muck up what I have.

I have a modal dialog with 4 tabs, index values 0,1,2,3 and I wanted to open on tab 1 so in my code there is the following line:

    $("#tabs").tabs('select',1);

and tab 1 would always contain the previous displays data(html ajax content) until I would click on a different tab (for example tab 2) and then back (to tab 1) ...so I did the following:

    // this forces tab content update
    $("#tabs").tabs('select',1);
    $("#tabs").tabs('select',2);
    $("#tabs").tabs('select',1);

and it worked :)

Tactless

Answer 11

Since this question has been answered many times over a long period of time, it couldn't hurt to post an update for more recent versions of jquery. I'm using jquery-ui 1.10.3 and the assumpsions Trevor Conn made don't seem to be valid anymore. However, his approach helped me with some modification. Let's say the tab I wish to refresh is called "tab_1" (id of the list item)

<div id="tabs" class="tabs">
    <ul>
        <li id="tab_1">
            <a href="my_link">tab one</a>
        </li>
        ...(other tabs)...
    </ul>
</div>

In my javascript method to refresh the tab content, I write (using jquery):

var tab = $('#tab_1');
var id = tab.attr('aria-controls');
var url = $('a',tab).attr('href');
$("#"+id).load(url);

The attribute "aria-controls" contains the id of the div containing the tab content. "area-controls" might have been a more logical name, but as an opera enthousiast, I'm not complaining. :-)

Ahoufe

Answer 12

I found a work around this issue. After trying all of these methods, none of them worked for me. So for simplicity I came up with this solution and while it's not the most elegant way, it still does the work.

Set the focus on a different tab first and then return the focus to the tab you want to refresh.

$("#myTabs").tabs("option", "active", 0);  
$("#myTabs").tabs("option", "active", 1); 

Hydrotherapy