What can i do in order to remain on the same sub tab after a page refreshes?

Question

I am developing a small school management web app.

I have made several tabs (using bootstrap 3), most of these tabs have sub tabs (i.e a single tab has one or more tabs under it).

These sub tabs have forms that takes data from the user.

The problem is: when a button is clicked, the user is taken to the main home tab.

I want the user to remain on the current tab (where they are currently).

How do i do this?

this is the code (improved)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Keep Last Selected Bootstrap Tab Active on Page Refresh</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
        localStorage.setItem('activeTab', $(e.target).attr('href'));
    });
    var activeTab = localStorage.getItem('activeTab');
    if(activeTab){
        $('#myTab a[href="' + activeTab + '"]').tab('show');
    }
});

</script>
<style type="text/css">
    .bb-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bb-example">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a data-toggle="tab" href="#sectionA">Section A</a></li>
        <li><a data-toggle="tab" href="#sectionB">Section B</a></li>
        <li><a data-toggle="tab" href="#sectionC">Section C</a></li>
    </ul>
    <div class="tab-content">
        <div id="sectionA" class="tab-pane fade in active">
            <h3>Section A</h3>
            <p>Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
        </div>
        <div id="sectionB" class="tab-pane fade">
            <h3>Section B</h3>
            <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
        </div>
        <div id="sectionC" class="tab-pane fade">
            <br>
                    <div class="row" style="height: 475px;">
                        <ul class="nav nav-tabs nav-justified" id="myTab">
                            <li id="li" class="active">
                                <a href="#Tab1" data-toggle="tab" style="color: blue;"> <span class="glyphicon glyphicon-plus"></span> &nbsp;&nbsp;Tab 1</a>
                            </li>

                            <li id="li" >
                                <a href="#Tab2" data-toggle="tab" style="color: blue;"><span class="glyphicon glyphicon-eye-open"></span> Tab 2</a>
                            </li>

                        </ul>


                     <div class="col-md-11" >
                        <div class="container" >
                            <div class="tab-content">
                                <div id="Tab1" class="tab-pane active">
                                        <div class="row">
                                            <p> Hello there! Tab 1</p>
                                            <br>
                                        </div>
                                </div>

                                <div id="Tab2" class="tab-pane">
                                        <div class="row">
                                            <p> Hello there too! Tab 2</p>
                                                 <div class="container"> 
                                            <div class="row">
                                                        <div class="col-md-8">
                                                            <br />
                                                        <form action="tab2.php" method="POST">
                                                            <div class="form-group">
                                                                <label for="InputUserName"> Enter User Name</label>
                                                                <input class="form-control" placeholder="Enter User Name" type="text" name="" id="userName">
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="userName"> Enter Password</label>
                                                                <input class="form-control" placeholder="Enter Password" type="Password" name="" id="userName">
                                                            </div>
                                                            <input type="submit" id="submit" class="btn btn-primary">
                                                        </form>


                                                    </div>
                                            </div>
                                            </div>
                                            <br>
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    </div>

        </div>

    </div>
</div>
</body>
</html>

Hi! Welcome on SO. Please, provide in your post some code (php, asp, html, whatever) of the page your are currently working with so that we could help you starting from the code you already have. — shadowsheep, Dec 22 '18 at 19:34
It's not a good practice to post a screenshot of the code. It's better to post the code itself and if you want to make a sneek peak of the UI then you can post a picture of the UI. — shadowsheep, Dec 22 '18 at 19:40
i have included the code,please help,the first sub tab is working just fine but when i click on the second and update a form,it brings the home page as the first page,can i get a way around this? — iSulesh, Dec 23 '18 at 18:48

shadowsheep · Answer 1 · 2018-12-25T00:11:47.447

I see no one is helping you so I'll give you a solution.

It's quite a lot of time I don't deal with web development, but I got something it could put you in the right direction.

Check it out.

There is also a live example here.

It's not a so well thought code but it's something that works and could help you.

So that's my working code:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Keep Last Selected Bootstrap Tab Active on Page Refresh</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            console.log('here I am')
            // this add an handler when a tab is selected on myMaiTab 
            $('#myMainTab a[data-toggle="tab"]').on('show.bs.tab', function(e) {
                localStorage.setItem('activeTab', $(e.target).attr('href'));
            });
            // this add an handler when a tab is selected on mySubTab 
            $('#mySubTab a[data-toggle="tab"]').on('show.bs.tab', function(e) {
                localStorage.setItem('activeSubTab', $(e.target).attr('href'));
            });

            // Select the previous mainTab
            var activeTab = localStorage.getItem('activeTab');
            if(activeTab){
                $('#myMainTab a[href="' + activeTab + '"]').tab('show');
            }

            var activeSubTab = localStorage.getItem('activeSubTab');
            if(activeSubTab){
                $('#mySubTab a[href="' + activeSubTab + '"]').tab('show');
            }
        });
    </script>
    <style type="text/css">
        .bb-example{
            margin: 20px;
        }
    </style>
</head>

<body>
    <div class="bb-example">
        <ul class="nav nav-tabs" id="myMainTab">
            <li class="active"><a data-toggle="tab" href="#sectionA">Section A</a></li>
            <li><a data-toggle="tab" href="#sectionB">Section B</a></li>
            <li><a data-toggle="tab" href="#sectionC">Section C</a></li>
        </ul>
        <div class="tab-content">
            <div id="sectionA" class="tab-pane fade in active">
                <h3>Section A</h3>
                <p>Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
            </div>
            <div id="sectionB" class="tab-pane fade">
                <h3>Section B</h3>
                <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
            </div>
            <div id="sectionC" class="tab-pane fade">
                <br>
                <div class="row" style="height: 475px;">
                    <ul class="nav nav-tabs nav-justified" id="mySubTab">
                        <li id="li" class="active">
                            <a href="#Tab1" data-toggle="tab" style="color: blue;"> <span class="glyphicon glyphicon-plus"></span> &nbsp;&nbsp;Tab 1</a>
                        </li>

                        <li id="li">
                            <a href="#Tab2" data-toggle="tab" style="color: blue;"><span class="glyphicon glyphicon-eye-open"></span> Tab 2</a>
                        </li>

                    </ul>

                    <div class="col-md-11">
                        <div class="container">
                            <div class="tab-content">
                                <div id="Tab1" class="tab-pane active">
                                    <div class="row">
                                        <p> Hello there! Tab 1</p>
                                        <br>
                                    </div>
                                </div>

                                <div id="Tab2" class="tab-pane">
                                    <div class="row">
                                        <p> Hello there too! Tab 2</p>
                                        <div class="container">
                                            <div class="row">
                                                <div class="col-md-8">
                                                    <br />
                                                    <form method="POST">
                                                        <div class="form-group">
                                                            <label for="InputUserName"> Enter User Name</label>
                                                            <input class="form-control" placeholder="Enter User Name" type="text" name="user" id="userName">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="userName"> Enter Password</label>
                                                            <input class="form-control" placeholder="Enter Password" type="Password" name="password" id="Password">
                                                        </div>
                                                        <input type="submit" id="submit" class="btn btn-primary">
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                        <br>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </div>
    </div>
</body>

</html>

There were some mistakes on your code that here below I will explain to you just to make you aware of them.

First of all you have added a single global handler on a selected tab in a nav-tab to all nav tabs present in you DOM (your html file).

$('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
    localStorage.setItem('activeTab', $(e.target).attr('href'));
});

This way when you are in your Section C and you choose your Tab 2 this handler triggers saving the item activeTab on the browser local storage overlapping the value of the outer tab.

Moreover you have added the same id to the two nav-tab in your DOM, making for you impossible to programmatically distinguish between them.

So what I've made is to add different id to the nav-tabs

myMainTab
mySubTab

And I set different handlers for them:

        // this add an handler when a tab is selected on myMaiTab 
        $('#myMainTab a[data-toggle="tab"]').on('show.bs.tab', function(e) {
            localStorage.setItem('activeTab', $(e.target).attr('href'));
        });
        // this add an handler when a tab is selected on mySubTab 
        $('#mySubTab a[data-toggle="tab"]').on('show.bs.tab', function(e) {
            localStorage.setItem('activeSubTab', $(e.target).attr('href'));
        });

So that the handlers do not overlap each other.

One last thing.

If you want to capture your input POST value server side, you need to add a value also to the name property:

<input class="form-control" placeholder="Enter User Name" type="text" name="user" id="userName">

<input class="form-control" placeholder="Enter Password" type="Password" name="password" id="Password">

That's all. Hope to have understood your needs.

Suggestions:

If I can, I'd like to suggest you to study deeper the following subjects that could help you have a better control and understanding of what you are developing:

jQuery
Browers developer tools and how to debug your javascript code
Bootstrap 3 with its javascript section and in your particular situation the javascript section for tabs.

What can i do in order to remain on the same sub tab after a page refreshes?

1 Answers1