Link to home
Create AccountLog in
Avatar of zachvaldez
zachvaldezFlag for United States of America

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..
<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>

Open in new window

Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

That is probably because you are posting back to the server which means the page is being refreshed. If this is the case you are going to have to either
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.
Avatar of 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.
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>

Open in new window

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.
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
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!
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Thanks for your time to this.