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?
 
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
 
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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
 
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
 
zachvaldezAuthor Commented:
Thanks for your time to this.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.