Refresh tab content on click in JQuery UI Tabs

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.

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

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