Reputation: 4753
I am using Jquery UI tabs in my asp.net mvc web application.
I have total of 6 tabs. Each tab contains a user control.
I am dynamically loading the contents into each tab using ajax like this:
<div id="tabs" style="clear: both" align="center">
<ul>
<li><a href="<%:Url.Action("AddControl","App",new {id=Model.ID}) %>">
<span>Tab </span></a></li>
<li><a href="<%:Url.Action("Control","App",new {id=1,data=Model.ID}) %>">
<span>Tab1</span></a></li>
<li><a href="<%:Url.Action("Control","App",new {id=2,data=Model.ID}) %>">
<span>Tab2</span></a></li>
<li><a href="<%:Url.Action("Control","App",new {id=3,data=Model.ID}) %>">
<span>Tab3</span></a></li>
<li><a href="<%:Url.Action("Control","App",new {id=4,data=Model.ID}) %>">
<span>Tab4</span></a></li>
<li><a href="<%:Url.Action("Control","App",new {id=5,data=Model.ID})%>">
<span>Tab5</span></a></li>
</ul>
<div id="tab1">
</div>
<div id="tab2" >
</div>
<div id="tab3" >
</div>
<div id="tab4" >
</div>
<div id="tab5" >
</div>
<div id="tab6">
</div>
</div>
As one can see, the tab 2 to tab 6 contains the same user control. The data will be loaded based on tab clicked.
here, my problem is once the tab is loaded , clicked on another tab , the other tab contents are just hidden.
Since, i am using the same user controls , i am facing some problems.
So, i want to remove the content from the tabs which are hidden ( not active )
Please help..
Upvotes: 3
Views: 1509
Reputation: 337743
You can use the activate
event in the plugin to clear the contents of the previous tab. Try this:
$('#tabs').tabs({
activate: function(event, ui) {
ui.oldPanel.empty(); // clear the content of the previous tab
}
// other settings, if needed...
});
Upvotes: 5