asked on stay in same tab after postback
When I select the save button in tab 2 , the focus does not stay in tab 2 but instead it jumps back to tab 1.
Here's the code..
Here's the code..
<div id="myTabs">
<ul class="nav nav-tabs tabs" id="thistab" runat="server">
<li class="tab-link current" data-tab="tab1" id="tab11" data-toggle="tab" title="Person" onclick="return setText('lblSelect',this.title);"><a href="#tab1">Person</a></li>
<li class="tab-link" data-tab="tab-6" id="tab6" data-toggle="tab"><a href="#tab6" onclick="return setText('lblSelect',this.title);" runat="server" title="Employee">Information</a></li>
<li class="tab-link" data-tab="tab-2" id="tab2" data-toggle="tab"><a href="#tab2" onclick="return setText('lblSelect',this.title);" title="Assignment">Assignment History</a></li>
<li class="tab-link" data-tab="tab-3" id="tab3" data-toggle="tab"><a href="#tab3" onclick="return setText('lblSelect',this.title);" title="Issues">Issues</a>
<ul class="tabs show-on-hover" id="ulIssue">
<li class="tab-link" data-tab="tab-8" id="tabs-8"><a href="#tabs-8" title="New Issue" onclick="addlocation('RedIssue.aspx')">New Issue</a>
</li>
</ul>
</li>
<li class="tab-link" data-tab="tab-4" id="tab4" data-toggle="tab"><a href="#tab4" onclick="return setText('lblSelect',this.title);" title="PPC">PPC</a></li>
<li class="tab-link" data-tab="tab-5" id="tab5" data-toggle="tab"><a href="#tab5" onclick="return setText('lblSelect',this.title);" title="Comments">Comments</a></li>
<li class="tab-link" data-tab="tab-7" id="tab7" data-toggle="tab"><a href="#tab7" onclick="return setText('lblSelect',this.title);" title="Attachments">Attachments</a></li>
</ul>
<div class="tab-content current" id="tab-1"...</div>
<div class="tab-content" id="tab-2"...
<asp:Button ID="btnSave" runat="server" Text="Save" CssClass="small button right" OnClick="btnSave_Click" />
</div>
<div class="tab-content" id="tab-3"...</div>
<div class="tab-content" id="tab-4"...</div>
<div class="tab-content" id="tab-5"...</div>
<div class="tab-content" id="tab-6"...</div>
</div>
ASP.NETJavaScriptjQuery
Last Comment
zachvaldez
ASKER
Thanks!. It would be better if you can show this is code. Looks terrific!
The code is highly dependent on your implementation. Are you wanting to go the AJAX route or the post back route.
If post back then all you need to do is when the postback is done check to see what tab is active - not sure how you do this in your code as I don't know what data you are sending back - but I am assuming the context of the data defines the tab - if not you would need to include something in the postback that says what tab is active.
In your server code you have an if condition that checks that value and then sets whatever class is necessary on the tab that is active.
I am giving you broad strokes process here because you will need to adapt this to your code.
If post back then all you need to do is when the postback is done check to see what tab is active - not sure how you do this in your code as I don't know what data you are sending back - but I am assuming the context of the data defines the tab - if not you would need to include something in the postback that says what tab is active.
In your server code you have an if condition that checks that value and then sets whatever class is necessary on the tab that is active.
I am giving you broad strokes process here because you will need to adapt this to your code.
ASKER
here is a simple illustration. I want to know what to be added to keep button stay in same tab because it jumps to tab1 after clicking it.
<ul id="tabs">
<li><a href="#" name="tab1">One</a></li>
<li><a href="#" name="tab2">Two</a></li>
<li><a href="#" name="tab3">Three</a></li>
<li><a href="#" name="tab4">Four</a></li>
</ul>
<div id="content">
<div id="tab1">tab1 content</div>
<div id="tab2">tab2 content
<div class="row">
<div class="col-lg-2">
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</div>
</div>
<div id="tab3">tab3 content</div>
<div id="tab4">tab4 content</div>
</div>
I have already explained - you need to do this in code on the server - the HTML code is not helpful because it does not do anything. You need logic on the server that determines what tab you were in (based on parameters sent back as part of the postback) and then renders the page with the correct class assigned to the correct tab.
I can't tell you how to do that based on what you have posted.
What are you using for your tabs (jQuery / Bootstrap)?
Why are you doing a postback to the server from a tab - what is that for - what happens in that step?
You need to provide us with the information we need to help you.
I can't tell you how to do that based on what you have posted.
What are you using for your tabs (jQuery / Bootstrap)?
Why are you doing a postback to the server from a tab - what is that for - what happens in that step?
You need to provide us with the information we need to help you.
ASKER
The example I showed you , the button has no code behind and it still jumps to tab1.
Ok, let's do it this way.
Can you show us a link.
Failing that - please can you do the following.
Browse to the page.
View Source
Cut and Paste the HTML
Can you show us a link.
Failing that - please can you do the following.
Browse to the page.
View Source
Cut and Paste the HTML
ASKER
See this is the code
<ul id="tabs">
<li><a href="#" name="tab1">One</a></li>
<li><a href="#" name="tab2">Two</a></li>
<li><a href="#" name="tab3">Three</a></li>
<li><a href="#" name="tab4">Four</a></li>
</ul>
<div id="content">
<div id="tab1">tab1 content</div>
<div id="tab2">tab2 content
<div class="row">
<div class="col-lg-2">
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</div>
</div>
<div id="tab3">tab3 content</div>
<div id="tab4">tab4 content</div>
</div>
If you click the button it goes to to tab!
<ul id="tabs">
<li><a href="#" name="tab1">One</a></li>
<li><a href="#" name="tab2">Two</a></li>
<li><a href="#" name="tab3">Three</a></li>
<li><a href="#" name="tab4">Four</a></li>
</ul>
<div id="content">
<div id="tab1">tab1 content</div>
<div id="tab2">tab2 content
<div class="row">
<div class="col-lg-2">
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</div>
</div>
<div id="tab3">tab3 content</div>
<div id="tab4">tab4 content</div>
</div>
If you click the button it goes to to tab!
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Thanks for your time to this.
a) Do your postback using AJAX
b) When you regenerate the page you will need to regenerate it with the active tab marked as active.