Hi,
I have a tabcontainer with 3 tabs.
On the first tab, I make some javascript controls and I would like to block the access to the 2 other tabs.
So, I add a function to the OnClientActiveTabChanged.
Here's my little test function
function clientActiveTabChanged(sender, args)
{
if ($get('<%=myControl2Test.ClientID %>').value=="1"){
var tabs = $find('<%=TabContainer1.ClientID %>');
tabs.set_activeTabIndex(0);
}
}
Using this method, I stay on right panel, but I get a Stack Error
Any help.
Stan
Hi Stan92,
My understanding of your issue is that you have three TabPanels inside a TabContainer and the second and third TabPanel are forbidden to access. If I have misunderstood, please let me know.
Stan92:
function clientActiveTabChanged(sender, args)
{
if ($get('<%=myControl2Test.ClientID %>').value=="1"){
var tabs = $find('<%=TabContainer1.ClientID %>');
tabs.set_activeTabIndex(0);
}
}
Using this method, I stay on right panel, but I get a Stack Error
Because there is a infinite loop in your code. When click on the Tab, the clientActiveTabChanged will be called and then tabs.set_activeTabIndex(0) will be excuted, now another OnClientActiveTabChanged will be fired. You can add "alert(1);" inside the clientActiveTabChanged(sender, args) function and have a test that will be make you clear.
So my solution is adding an additional condition to the function. Sentence tabs.set_activeTabIndex(0) will be execute only in the case of activeTabIndex is not zero. Here is the whole sample
<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" AutoPostBack="false" OnClientActiveTabChanged="changeTab" ActiveTabIndex="1"> <ajaxToolkit:TabPanel ID="TabPanel1" runat="server"> <HeaderTemplate>Tab1</HeaderTemplate> <ContentTemplate> <div id ="myDiv"><%=DateTime.Now.ToString()%></div> </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel2" runat="server"> <HeaderTemplate>Tab2</HeaderTemplate> <ContentTemplate>Wonderful</ContentTemplate> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> <script type="text/javascript" language="javascript"> function changeTab(){ if($find("<%=TabContainer1.ClientID%>").get_activeTabIndex()!=0) $find("<%=TabContainer1.ClientID%>").set_activeTabIndex(0); } </script> </form></body></html>I hope this help.
Best regards,
Jonathan
