Few weeks ago, I incorporated TabContainer to my website and noticed the tab index was not persistent, meaning it was always defaulting to 0 whenever the page reloads (or refreshes). If I click the 3rd tab (index = 2) and reload the page by hitting F5,
then the 1st tab (index = 0) would always be selected.
I'm currently trying to write a simple Javascript that "stores" the tab index when one of the tabs is clicked, so I can retrieve the "stored" tab index number during the Page_Load event.
1) alert() function is working just fine. I'm seeing the message box with the correct tab index whenever I select one of the tabs. How can I store that same tab index value into a textbox???
2) Am I suppose to use an HTML textbox or an ASP textbox when I need to read the tab index value when during the Page_Load event?? I'm little confused about this.
function ActiveTabChanged(sender, e) {
alert (sender.get_activeTab().get_tabIndex());
$get("theIdOfTheTextBox").value = sender.get_activeTab().get_tabIndex(); // or use document.getElementById() method
}
2. If you need to read its value on server side, use Asp textbox is a better choice.
I've tried to follow this solution, but I'm still not seeing my tab selection persisted across postbacks. It seems like it should be a simple operation, but perhaps I am too novice to make it work. Currently, I am seeing the correct index in the alert, and
in the text box value, but when I hit F5 to refresh the page, the textbox value is reset, and the TabContainer defaults back to tab index 0 for its selected tab. Very frustrating, as I haven't found any working solutions to this on asp.net or other similar
forums. Please help!
I've tried to follow this solution, but I'm still not seeing my tab selection persisted across postbacks. It seems like it should be a simple operation, but perhaps I am too novice to make it work. Currently, I am seeing the correct index in the alert, and
in the text box value, but when I hit F5 to refresh the page, the textbox value is reset, and the TabContainer defaults back to tab index 0 for its selected tab. Very frustrating, as I haven't found any working solutions to this on asp.net or other similar
forums. Please help!
If you are still trying to figure out how to refresh page and retain current tab index (so that you wont be positioned on first one -> 0 when you browse between tabs) try and put this between your
tab container brackets:
AutoPostBack="true"
It works for me. (and thx, your posts helped me to find solution for myself).
brnskm
Member
157 Points
94 Posts
AJAX - making the TabContainer TabIndex persistent by using Javascript even after the page reload...
May 30, 2007 02:49 PM|LINK
Few weeks ago, I incorporated TabContainer to my website and noticed the tab index was not persistent, meaning it was always defaulting to 0 whenever the page reloads (or refreshes). If I click the 3rd tab (index = 2) and reload the page by hitting F5, then the 1st tab (index = 0) would always be selected.
I'm currently trying to write a simple Javascript that "stores" the tab index when one of the tabs is clicked, so I can retrieve the "stored" tab index number during the Page_Load event.
Here's the code:
<head id="Head1" runat="server">
<script type="text/javascript">
function ActiveTabChanged(sender, e) {
alert (sender.get_activeTab().get_tabIndex());
Text1.value = sender.get_activeTab().get_tabIndex();
}
</script>
</head>
<input id="Text1" type="text" />
<cc2:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" OnClientActiveTabChanged="ActiveTabChanged">
... omitted...
</cc2:TabContainer>
Questions:
1) alert() function is working just fine. I'm seeing the message box with the correct tab index whenever I select one of the tabs. How can I store that same tab index value into a textbox???
2) Am I suppose to use an HTML textbox or an ASP textbox when I need to read the tab index value when during the Page_Load event?? I'm little confused about this.
Thanks.
Raymond Wen ...
All-Star
32101 Points
3764 Posts
Re: AJAX - making the TabContainer TabIndex persistent by using Javascript even after the page re...
Jun 04, 2007 08:20 AM|LINK
Hi,
1 To save it in a textbox, you can use
function ActiveTabChanged(sender, e) {
alert (sender.get_activeTab().get_tabIndex());
$get("theIdOfTheTextBox").value = sender.get_activeTab().get_tabIndex(); // or use document.getElementById() method
}
2. If you need to read its value on server side, use Asp textbox is a better choice.
Hope this helps.
brnskm
Member
157 Points
94 Posts
Re: AJAX - making the TabContainer TabIndex persistent by using Javascript even after the page re...
Jun 04, 2007 06:36 PM|LINK
Thanks. It works now!
maxawesome
Member
2 Points
1 Post
Re: AJAX - making the TabContainer TabIndex persistent by using Javascript even after the page re...
Mar 31, 2008 11:58 PM|LINK
I've tried to follow this solution, but I'm still not seeing my tab selection persisted across postbacks. It seems like it should be a simple operation, but perhaps I am too novice to make it work. Currently, I am seeing the correct index in the alert, and in the text box value, but when I hit F5 to refresh the page, the textbox value is reset, and the TabContainer defaults back to tab index 0 for its selected tab. Very frustrating, as I haven't found any working solutions to this on asp.net or other similar forums. Please help!
Here is my code:
<body> <form id="form1" runat="server"> <asp:ScriptManager ID="scriptManager1" runat="server"> </asp:ScriptManager> <script type="text/javascript"> function ActiveTabChanged(sender, e) { alert (sender.get_activeTab().get_tabIndex()); $get("tabValue").value = sender.get_activeTab().get_tabIndex(); } </script> <asp:TextBox ID="tabValue" runat="server"></asp:TextBox> <div id="DataSources"> <asp:SqlDataSource ID="SqlDataSource1" runat="server"></asp:SqlDataSource> <asp:SqlDataSource ID="SqlDataSource2" runat="server"></asp:SqlDataSource> <asp:SqlDataSource ID="SqlDataSource3" runat="server"></asp:SqlDataSource> </div> <div id="Details"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:FormView ID="FormView1" runat="server"> </asp:FormView> </ContentTemplate> </asp:UpdatePanel> </div> <div id="TabStuff"> <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> <ContentTemplate> <ajax:TabContainer ID="tabContainer1" runat="server" OnClientActiveTabChanged="ActiveTabChanged" > <ajax:TabPanel ID="tabPanel1" runat="server" HeaderText="First Panel"> <ContentTemplate> <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1"> </asp:GridView> </ContentTemplate> </ajax:TabPanel> <ajax:TabPanel ID="tabPanel2" runat="server" HeaderText="Second Panel"> <ContentTemplate> <asp:GridView ID="GridView2" runat="server" DataSourceID="SqlDataSource2"> </asp:GridView> </ContentTemplate> </ajax:TabPanel> <ajax:TabPanel ID="tabPanel3" runat="server" HeaderText="Third Panel"> <ContentTemplate> <asp:GridView ID="GridView3" runat="server" DataSourceID="SqlDataSource3"> </asp:GridView> </ContentTemplate> </ajax:TabPanel> </ajax:TabContainer> <asp:Button id="reload" runat="server" OnClick="reload_OnClick"/> </ContentTemplate> </asp:UpdatePanel> </div> </form> </body>jedliu
Member
21 Points
39 Posts
Re: AJAX - making the TabContainer TabIndex persistent by using Javascript even after the page re...
Apr 01, 2008 03:01 AM|LINK
maxawesome,
Maybe you can try the <asp:HiddenField> control.
JohnS176
Member
178 Points
56 Posts
Re: AJAX - making the TabContainer TabIndex persistent by using Javascript even after the page re...
Apr 06, 2009 04:02 PM|LINK
hi,
If you are still trying to figure out how to refresh page and retain current tab index (so that you wont be positioned on first one -> 0 when you browse between tabs) try and put this between your tab container brackets:
AutoPostBack="true"
It works for me. (and thx, your posts helped me to find solution for myself).