Dynamic Bootstrap Nav tabs

Question

I am trying to save the active state of Bootstrap nav tabs and send them as hidden field in the form so that i can maintain the active state on next load of the page.

My nav-tabs are ;

        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" index="1" class="active"><a href="#text-only" aria-controls="text-only" role="tab" data-toggle="tab">Text only</a></li>
            <li role="presentation" index="2"><a href="#with-pic" aria-controls="with-pic" role="tab" data-toggle="tab">With Pic</a></li>
            <li role="presentation" index="3"><a href="#gallery" aria-controls="gallery" role="tab" data-toggle="tab">Gallery</a></li>
            <li role="presentation" index="4"><a href="#map-view" aria-controls="map-view" role="tab" data-toggle="tab" >Map View</a></li>
        </ul>

My nav-tab for contents are;

 <div class="tab-content">
       <div role="tabpanel" class="tab-pane active" id="text-only">
       </div>
       <div role="tabpanel" class="tab-pane" id="with-pic">
       </div>
       <div role="tabpanel" class="tab-pane" id="gallery">
       </div>
       <div role="tabpanel" class="tab-pane" id="map">
       </div>
 </div>

I want to send the active state via form input field like

 <form action="" method="get" name="search_form">
   <input type="hidden" name="active_nav_tab" value="">
   <input type="hidden" name="active_nav_content" value="">
   <input type="submit" value="submit">
 </form>

One Logic is to get active tab by Jquery but what will be the value which I will pass in the form fields. I am stuck. Will really appreciate any kind of help

correct me if I am wrong, but are you using php and with that would like to send the form states or values to be passed to the other page where you would set the nav settings with the values from the previous page? — Shayan Ahmad, May 25 '15 at 12:46
You mean get the Id of the active tab pane and save it in form field? and next time show it via php? — Mudassar Khani, May 25 '15 at 12:46
yep, that could be one of the ways, on the second page you will have the values, and with those values on that page you can set the settings accordingly — Shayan Ahmad, May 25 '15 at 12:48
the value could be the id or class that you would send through php. — Shayan Ahmad, May 25 '15 at 12:49
Unfortunately I am not very good in Jquery. I made the logic but now i have to dig for the selector to select the active id. — Mudassar Khani, May 25 '15 at 12:50
Maybe you should look into html5 local storage? No need to stress server :) http://diveintohtml5.info/storage.html — nhaa123, May 25 '15 at 12:56

EaziLuizi · Accepted Answer · 2015-05-25T13:02:47.290

Here is what you need to do in order to get the selected "tabs" you want, then when reading from php or what ever check for the match and set the active element accordingly:

JQuery:

    $(function () {
        $('#myForm').submit(function () {

            var active_nav_tab = $('ul.nav-tabs li.active').attr('index'); //get index
            var active_nav_content = $('.tab-content .active').attr('id'); //get id

            $('#myForm input[name=active_nav_tab]').val(active_nav_tab);
            $('#myForm input[name=active_nav_content]').val(active_nav_content);
        });
    });

I just added an ID to your form like so:

    <form action="" method="get" id="myForm" name="search_form">
        <input type="hidden" name="active_nav_tab" value="">
        <input type="hidden" name="active_nav_content" value="">
        <input type="submit" value="submit">
    </form>

EDIT:

Then to "reload" the active tab you would do something like this:

    $(function () {
        //reload the last "active" li
        $('ul.nav-tabs li').each(function () {
            var index = $(this).attr('index');

            //do your check 
            if (index == "the number you passed back earlier") {
            }
        });

        //reload the last "active" tabpanel
        $('.tab-content > div').each(function () {
            var id = $(this).attr('id');

            //do your check 
            if (id == "the id you passed back earlier") {
            }
        });
    });

@MalikMudassar No problem, i'm glad it helped, check my edit, should help you with "reloading" the values — EaziLuizi, May 25 '15 at 13:03

score 0 · Answer 2 · answered Oct 30 '15 at 15:31

This is the best solution for me, works over standard bootstrap nav-tab

$(document).ready(function() {
  /*disable non active tabs*/
  $('.nav li').not('.active').addClass('disabled');
  $('.nav li').not('.active').find('a').removeAttr("data-toggle");  
  $('#next').click(function(){
    /*enable next tab*/
    $('.nav li.active').next('li').removeClass('disabled');
    $('.nav li.active').next('li').find('a').attr("data-toggle","tab")
    $('.nav li.active').next('li').find('a').tab('show')
    $('.nav li').not('.active').addClass('disabled');
    $('.nav li').not('.active').find('a').removeAttr("data-toggle");     
  });  
  $('#prev').click(function(){
    /*enable prev tab*/
    $('.nav li.active').prev('li').removeClass('disabled');
    $('.nav li.active').prev('li').find('a').attr("data-toggle","tab")
    $('.nav li.active').prev('li').find('a').tab('show')
    $('.nav li').not('.active').addClass('disabled');
    $('.nav li').not('.active').find('a').removeAttr("data-toggle");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">Home Content</div>
    <div role="tabpanel" class="tab-pane" id="profile">Profile Content</div>
    <div role="tabpanel" class="tab-pane" id="messages">Messages Content</div>
    <div role="tabpanel" class="tab-pane" id="settings">Settings Content</div>
  </div>
<button id="prev">Previus</button>
<button id="next">Next</button>
</div>

Dynamic Bootstrap Nav tabs

2 Answers2