cannot find html elements inside the tabs of ajaxtoolkit tabcontainer when using js

Question

I am using Asp.net 4 C# 2010. I have two tabs using ajaxtoolkit tabcontainer and I want to address the elements inside using javascript.

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<ajaxToolkit:TabContainer runat="server" ScrollBars="Auto" ActiveTabIndex="0"        
    OnDemand="true" AutoPostBack="false" TabStripPlacement="Top"
    CssClass="ajax__tab_xp" VerticalStripWidth="120px" ID="TabContainer">

        <ajaxToolkit:TabPanel ID="canvas1Tab" runat="server" Enabled="true"
    ScrollBars="Auto" OnDemandMode="Once">
     <ContentTemplate>

   <canvas id="canvas1" width="300" height="300" />
    Your browser doesn't support html 5 or Canvas. Please upgrade to the lasted 
             </canvas>

    </ContentTemplate>
</ajaxToolkit:TabPanel>

        <ajaxToolkit:TabPanel ID="canvas2Tab" runat="server" Enabled="true"
    ScrollBars="Auto" OnDemandMode="Once">
     <ContentTemplate>

   <canvas id="canvas2" width="300" height="300" />
    Your browser doesn't support html 5 or Canvas. Please upgrade to the lasted 
             </canvas>

    </ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>

Now I want to draw some stuff on the canvases inside the tabs using javaScript. When the page loads, the first Tab is the one Selected.

I try to address the two canvases on $(document).ready.

Whenever Using the JavaScript command document.getElementById, The first canvas (the one with it's tab selected) is found, but the other one (canvas2) is givving an error.

Just for the record, I have checked this thing using asp-control (although it's not what I need). I tried adding an asp:TextBox to the second tab and then use document.getElementById("<%=TextBox1.ClientID%>"), but it gives me

Uncaught ReferenceError: MainContent_TabContainer_canvas2Tab_TextBox1 is not defined

I hope I made myself clear.

What Can I Do to make this work?

What result do you get if you select the second tab manually before your trigger your document.getElementById() ? I assume the second tab is only loaded once it is selected and does not yet exist. — eX0du5, Oct 17 '12 at 07:40

score 0 · Answer 1 · answered Oct 17 '12 at 08:08

I think I found a way to load all tabs at once. ajaxToolkit:TabContainer has a Property OnDemand.

OnDemand - Whether to render/load tabs onDemand or all at page load

If you set OnDemand to be true, then you can add to each tab the property OnDemandMode

OnDemandMode - When container's onDemand is true then whether to load tab - Always, Once, None

The key is to set

OnDemand=false This makes all the tabs to load at once, and not by clicking on them

cannot find html elements inside the tabs of ajaxtoolkit tabcontainer when using js

1 Answers1