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>

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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.

Answer 6

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.