Refresh tab content on click in JQuery UI Tabs

jquery, jquery-ui-tabs

Solution

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.

Problem

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> ```

Original source