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

zachvaldezAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
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.
0
zachvaldezAuthor Commented:
Thanks!. It would be better if you can show this is code. Looks terrific!
0
Julian HansenCommented:
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.
1
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

zachvaldezAuthor Commented:
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

0
Julian HansenCommented:
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.
0
zachvaldezAuthor Commented:
The example I showed you , the button has no code behind and it still jumps to tab1.
0
Julian HansenCommented:
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
0
zachvaldezAuthor Commented:
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!
0
Julian HansenCommented:
The code you have posted is not sufficient to determine what the problem is. We would need to see it in action or at lease see enough code to be able to replicate the issue. I suspect that there are scripts missing from this.

BTW - please use CODE tags for your code snippets. To add highlight your code and click the CODE button on the toolbar.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
zachvaldezAuthor Commented:
Thanks for your time to this.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.