Focus on same tab after selecting in a dropdown list

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
zachvaldezAsked:
Who is Participating?
 
Prakash SamariyaIT ProfessionalCommented:
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!
0
 
Prakash SamariyaIT ProfessionalCommented:
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?
0
 
zachvaldezAuthor 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

0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
zachvaldezAuthor Commented:
Like I mentioned, If I go to Tab2 and pick a value in dropdownlist, it goes back to Tab1
0
 
zachvaldezAuthor Commented:
I have not gotten response on this?
0
 
Prakash SamariyaIT ProfessionalCommented:
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.
0
 
zachvaldezAuthor Commented:
Prakash, Thanks for the idea but can you post the code.
0
 
Prakash SamariyaIT ProfessionalCommented:

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
0
 
zachvaldezAuthor Commented:
The dropdown selectedchanged index event is csausing the tab to focus on the first tab which is the default,
0
 
zachvaldezAuthor 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.
0
 
Prakash SamariyaIT ProfessionalCommented:
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 :)
0
 
zachvaldezAuthor 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

0
 
zachvaldezAuthor Commented:
This is the closer solution  submitted because I have no choice
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.