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

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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.