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

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

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

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