Jquery UI tabs problem, how to reload the active pages with ajax when click on the current tab second time ?
My html structrue like below:
<div class="mainTabs" id="mainTab">
<div class="tabNav">
<ul>
<li><a href="#mainTabs_1">home</a></li>
<li><a href="ajax/mPage1.asp">information</a></li>
<li><a href="ajax/mPage2.asp">project</a></li>
<li><a href="ajax/mPage3.asp">hr</a></li>
<li><a href="ajax/mPage4.asp">other</a></li>
<li><a href="ajax/mPage5.asp">control panel</a></li>
</ul>
</div>
<div class="mainTabContent">
<div id="mainTabs_1" class="mainHome">html content</div>
</div>
The first tab load normal html,and the other five tab load page with ajax. Now I have a problem ,I want reload the ajax page when I click the current tab second time. You know, the JQ ui tabs's tab has no click event when active the current tab panel.How can I fix the 'jquery.ui.tabs.js' code or the initialize code as follow:
$( "#mainTab" ).tabs({
beforeLoad: function( event,ui ) {
ui.panel.html("loading...");
});
ui.jqXHR.error(function() {
ui.panel.html("load page failed");
});
},
show: {effect: "fade",duration: 200},
hide: {effect: "fade",duration: 200},
active:0,
collapsible: false
});