Focus on same tab after selecting in a dropdown list

zachvaldez
zachvaldez used Ask the Experts™
on
I have two tabs in the form and a dropdownlist.
Even when I'm on Tab2 when I select a value, the page defaults back to tab 1 after postback. What can I do to maintain default on Tab2 upon postback
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Prakash SamariyaIT Professional
Top Expert 2015

Commented:
How do you make a tab in asp.net (using html, asp.net control, jQuery etc.)?
Could you please provide your part of code to look into it?

Author

Commented:
  <div class="row">

            <div class="col-md-4">
                <asp:DropDownList ID="ddlAccount" runat="server" OnSelectedIndexChanged="ddlAccount_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList>
            </div>
            
        </div>
         

        <ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab">Trade A</a></li>
            <li><a href="#tab2" data-toggle="tab">Trade B</a></li>

        </ul>

Open in new window

Author

Commented:
Like I mentioned, If I go to Tab2 and pick a value in dropdownlist, it goes back to Tab1
Bootstrap 4: Exploring New Features

Learn how to use and navigate the new features included in Bootstrap 4, the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

Author

Commented:
I have not gotten response on this?
Prakash SamariyaIT Professional
Top Expert 2015

Commented:
It seems you have created Tabs using CSS & Javascript/jQuery!
<ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab">Trade A</a></li>
            <li><a href="#tab2" data-toggle="tab">Trade B</a></li>
        </ul>

Open in new window

If yes, then you should following things
1. When tab changes, put active tab in the URL like http://yoururl#tab1
2. on document.ready method manipulate # and call your function which toggle tabs.

Author

Commented:
Prakash, Thanks for the idea but can you post the code.
Prakash SamariyaIT Professional
Top Expert 2015

Commented:

Prakash, Thanks for the idea but can you post the code.
I hope, if you implement using my idea will also work if you know how to do it using javascript/jQuery, same you did to toggle tabs!

You could check below link for reference
https://codepen.io/angelorubin/pen/qZzjdX

Author

Commented:
The dropdown selectedchanged index event is csausing the tab to focus on the first tab which is the default,
IT Professional
Top Expert 2015
Commented:
Dear zachvaldez,

Let the asp.net function its own way ( dropdown selectedchanged index event is doing its job), leave with it.

I am trying to explain you that, after post back response complete; In document.ready method call your tab toggle JavaScript function!

Hope this will helps you out.

Or please provide your asp.net page (Html part) code which include tab toggle event to check with!

Author

Commented:
Thanks Prakash,
I know you want to help but without providing code to how it work, I would consider it only as a suggestion and not a solution.
Prakash SamariyaIT Professional
Top Expert 2015

Commented:
Thanks zachvaldez for reply.
Did you understand what I was trying to explain in my solution?
If you do that way, you will get resolution! You could reply if you have implementation issue or error you found in it!
All the best :)

Author

Commented:
The dropdown is outside the tabs
as this shows. So I don't think solution would work. If I'm on tab2 and pull down the dropdown and select it jumps to Tab1

         
  <h3>Worksheet</h3>
        </header>
        <div class="row">

            <div class="col-md-4">
                <asp:DropDownList ID="ddlAccount" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlAccount_SelectedIndexChanged"></asp:DropDownList>
            </div>
            <div class="col-md-1">
                <asp:Label ID="lblFiscalYear" runat="server" Text="2018"></asp:Label>
            </div>
        </div>
       
        
        <ul class="nav nav-tabs" role="tablist" id="myTab">
            <li class="active" role="tab"><a href="#tab1" data-toggle="tab">Tab1</a></li>
            <li><a href="#tab2" role="tab" data-toggle="tab">Tab2</a></li>

        </ul>

Open in new window

Author

Commented:
This is the closer solution  submitted because I have no choice

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial