Saturday, March 24, 2012

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.

No comments:

Post a Comment