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>

It would be great if one of the answers had been flagged as the one that worked. — ThatAintWorking, Mar 25 '14 at 16:25

score 18 · Answer 1 · edited Jul 26 '11 at 18:03

18

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.

edited Jul 26 '11 at 18:03

Bo Persson

90,663
31
146
203

answered Jul 26 '11 at 17:36

Scott Pier

181
1
2

score 10 · Answer 2 · answered Nov 18 '10 at 23:39

10

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

answered Nov 18 '10 at 23:39

jj2

101
1
3

IDs of automatically created tab panels are determined by the value of the `aria-controls` attribute on the `
`, these days.

Walf

Feb 11 '19 at 05:54

score 4 · Answer 3 · answered May 22 '14 at 04:55

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

score 2 · Answer 4 · answered Oct 08 '11 at 03:51

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

baberlicious · Answer 5 · 2012-02-16T22:59:23.580

2

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.

edited Feb 16 '12 at 22:59

answered Feb 16 '12 at 22:26

baberlicious

49
5

3

You can use `.on()` instead of `.delegate()` as of v1.7 – Mickey Mouse Mar 01 '12 at 05:36

score 1 · Answer 6 · answered Apr 12 '12 at 14:06

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

Calocher · Answer 7 · 2010-01-05T17:25:03.520

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.

score 1 · Answer 8 · edited Dec 24 '11 at 17:22

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

griegs · Answer 9 · 2009-10-28T03:11:11.997

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.

where to put this code? i dont have a TabOne class. Please refer to the HTML code added above. — jack, Oct 28 '09 at 02:57

score 0 · Answer 10 · answered Dec 24 '13 at 08:44

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

score 0 · Answer 11 · answered Oct 10 '14 at 14:14

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. :-)

score 0 · Answer 12 · edited Apr 27 '15 at 15:38

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

Refresh tab content on click in JQuery UI Tabs

12 Answers12

Linked