Tab Container Javascript Error: Unspecified Error

I keep getting this error when I try to view a certain page with IE7. I do not get the error with Firefox 2. I have two pages that have tabs, but only receive an error on one of them. It occasionally works with no problems. If I set the first panel's visible property to false, then it works fine. The first panel contains an 2 update panels with a filtered text boxes, an update panel with a calendar extender, and an update panel with a mask edit extender and mask edit valuator. I also use framesets. Could any of this be causing the error? Does anyone know a work around?

I have found that the Masked Edit Extender is causing the error. Can I use this inside a tab panel? Is there something special I need to do to use it? If it's not possible, does anyone know of anything similar that would work in its place?

Tab Control Disappears when passing parameter to JavaScript function

Hello everybody!

I have a quite strange error on my hands here. And just to explain, this is what I want to do:

I created a tab control (AJAX) by:

"privatevoid constructTabs()

{

AjaxControlToolkit.TabContainer myTabs=new AjaxControlToolkit.TabContainer();

myTabs.Tabs.Add(loadPanel("NameOfTabGoesHere")); //this is donen times

myTabs.ActiveTab = productTabs.Tabs[0]; //to set the first tab as the active tab

myTabs.OnClientActiveTabChanged = "inVisiblePlans('" +myTabs.ActiveTab.ID.ToString() + "')"; //inVisiblePlans is my javascript function

Panel newPanel =newPanel();

newPanel.Controls.Add(productTabs);

this.Controls.Add(newPanel);

}

"

the function works ok but the problem is, the tab controls cannot be seen? it(the panel) is actually rendered with "hidden" attribute. And the strange thing is, if I domyTabs.OnClientActiveTabChanged = "inVisiblePlans";

The panels are visible but the page is of course useless.

All help will be greatly appreciated! Thanks is advance

Eduardo

Hello again.. about 15 minutes after I posted my question.. I got the answer myself... *slaps himself on the forehead

instead of usingOnClientActiveTabChanged , I used this:

tabPanel.OnClientClick ="function(){inVisiblePlans('" + tabPanel.ID.ToString() +"');}";

everytime I add a tabPanel.

meaning:

I did not attach the javascript to the whole tabcontrol but attached a call to it in every panel and it works fine now. Am still wondering tho, why the first idea did not work.

Am posting this for all who experience the same problem.

Many thanks!

Tab Panel problem

I'm trying to programatically change tabs from within javascript without having to go back to the server. After perusing some of the source code I landed on the following simple solution below. The problem I have is that it works in IE but not Firefox and I'm at a loss as to why. I've posted my working (in IE) copy athttp://ajax.jayhawk.net but the source below is complete. (The reason I need to do this is one of my tabs displays a google map and it doesn't draw properly if the tab is not initially visible, so the page loads with the map visible, but during the onload() code it switches to thereal first tab. I saw that some else had this issue but got no responses.)

Also, while I have your attention, I've found it difficult to learn the .NET-munged name of a control on the client side. For example, I have here ID="TabContainer1" and in this trivial example it doesn't change. However, in a more complex application it might be given the name "ctl00_ContentPlaceHolder1_TabContainer1". My "solution" to the problem is to add a hidden <div> at the end that contains nothing but "<%=TabContainer1.ClientID%>" and then use a document.getElementById to fetch the actual name which I can use with $find(). There's got to be a better way to do this, doesn't there?

Thanks in advance for the feedback, and thanks for some great tools!
-bp

<%@dotnet.itags.org. Page Language="VB" AutoEventWireup="true" CodeFile="default.aspx.vb" Inherits="_Default" %>

<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Tabs Test Page</title>
<script type="text/javascript">
var tab = 0;
function changetab()
{
var strContainer = document.getElementById("divTabContainer1").innerText;
var container = $find(strContainer);

container.set_activeTabIndex( ++tab > 2 ? tab = 0 : tab );
}
</script>
</head>
<body>
<form id="form1" runat="server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="142px"
Width="269px">
<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
<ContentTemplate>
This is tab #1
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
<ContentTemplate>
Now you're looking at tab #2
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
<ContentTemplate>
And, finally, it's tab #3!
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer><br />
<input type="button" onclick="javascript:changetab();" value="Click Me!" />
</form>
<div id="divTabContainer1" style="visibility: hidden;"><%=TabContainer1.ClientID%></div>
</body>
</html>

Hi,
I guess the reason is that innerText isn't a valid property for div element when work in Firefox. If you use a input element here, it works fine.
For instance:

var tab = 0;
function changetab()
{
var strContainer = document.getElementById("ipt").value;
var container = $find(strContainer);

container.set_activeTabIndex( ++tab > 2 ? tab = 0 : tab );
}

<input type="hidden" id="ipt" value=<%=TabContainer1.ClientID%> /
As a matter of fact, you don't need to use a element to hold its id, please try this:

</form>
<script type="text/javascript">
var tab = 0;
function changetab()
{
var container = $find("<%=TabContainer1.ClientID%>");

container.set_activeTabIndex( ++tab > 2 ? tab = 0 : tab );
}
</script>
</body>
</html>

Hope this helps.

TabContainer and OnClientActiveTabChanged

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