How would I get the ActiveTabIndex from TabContainer when the user selects a tab? I've tried the following but does not work.

<script type="text/javascript">
    function TabChange() {
        var tc = document.getElementById("TabContainer1")
        alert(tc.ActiveTabIndex);
    }
</script>

 <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="300px"
        Width="300px" CssClass="MyTabStyle" OnClientActiveTabChanged="TabChange">
        <asp:TabPanel runat="server" HeaderText="First" ID="TabPanel1">
            <ContentTemplate>
                <h1>
                    Tab 1
                </h1>
            </ContentTemplate>
        </asp:TabPanel>
        <asp:TabPanel ID="TabPanel2" runat="server" HeaderText="Second">
            <ContentTemplate>
                <h1>
                    Tab 2
                </h1>
            </ContentTemplate>
        </asp:TabPanel>
 </asp:TabContainer>

How would I get the ActiveTabIndex from TabContainer when the user selects a tab? I've tried the following but does not work.

<script type="text/javascript">
    function TabChange() {
        var tc = document.getElementById("TabContainer1")
        alert(tc.ActiveTabIndex);
    }
</script>

 <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="300px"
        Width="300px" CssClass="MyTabStyle" OnClientActiveTabChanged="TabChange">
        <asp:TabPanel runat="server" HeaderText="First" ID="TabPanel1">
            <ContentTemplate>
                <h1>
                    Tab 1
                </h1>
            </ContentTemplate>
        </asp:TabPanel>
        <asp:TabPanel ID="TabPanel2" runat="server" HeaderText="Second">
            <ContentTemplate>
                <h1>
                    Tab 2
                </h1>
            </ContentTemplate>
        </asp:TabPanel>
 </asp:TabContainer>

• javascript
• asp
• ajax
• web-applications

• did you check this? stackoverflow./questions/6905899/… – ahaliav fox Commented Oct 31, 2012 at 13:18
• @ahaliav yes that works to my expectations. thanks. if you put in answer then i can mark as answered. – Troy Mitchel Commented Oct 31, 2012 at 13:28

1 Answer 1

ASPX:

<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" OnClientActiveTabChanged="clientActiveTabChanged">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="Test1">
    <ContentTemplate>Test1</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="Test2">
    <ContentTemplate>Test2</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="Test3">
    <ContentTemplate>Test3</ContentTemplate>
</ajaxToolkit:TabPanel>

JS:

<script type="text/javascript">

function clientActiveTabChanged(sender, args) {

    alert(sender.get_activeTabIndex());
}