CODEWITHSUNDEEP
twitter-bootstrap
user2886165
user2886165

Reputation: 1

Bootstrap current tab active after a page reloaded?

I have two tabs. When i try to submit the second tab it will check for some mandantory field and it will display a error message. But when the page reloads it is displaying the first tab. I saw few threads in stackflow and implemented it but i am facing same problem.

this is my code

$(function() { 
                $('a[data-toggle="tab"]').on('shown', function(e){
                    //save the latest tab using a cookie:
                    $.cookie('last_tab', $(e.target).attr('href'));
                });
                //activate latest tab, if it exists:
                var lastTab = $.cookie('last_tab');
                if (lastTab) {
                    $('a[href=' + lastTab + ']').tab('show');
                }
                else
                {
                    // Set the first tab if cookie do not exist
                    $('a[data-toggle="tab"]:first').tab('show');
                }
            });

        </script>



        <div class="container">


            <div class="page-header">
                <h2>Payment</h2>
                <div class="clr"></div>
            </div>

            <div class="tabbable">
                <!-- Only required for left/right tabs -->
                <ul class="nav nav-tabs">
                    <li><a href="#tab1" data-toggle="tab">Pay with Stripe</a></li>




        <li><a href="#tab2" data-toggle="tab">Pay with PayPal </a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane" id="tab1">

Upvotes: 0

Views: 2221

Answers (2)

Abhijeet Sharma
Abhijeet Sharma

Reputation: 183

Are you using Bootstrap 3 ? If yes then you should use "shown.bs.tab" event instead of "show"

jQuery('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
      //save the latest tab using a cookie:
      jQuery.cookie('last_tab', jQuery(e.target).attr('href'));
    });

    //activate latest tab, if it exists:
    var lastTab = jQuery.cookie('last_tab');
    if (lastTab) {
        jQuery('ul.nav-tabs').children().removeClass('active');
        jQuery('a[href='+ lastTab +']').parents('li:first').addClass('active');
        jQuery('div.tab-content').children().removeClass('active');
        jQuery(lastTab).addClass('active');
    }

Click here for more details

Upvotes: 0

ɐsɹǝʌ ǝɔıʌ
ɐsɹǝʌ ǝɔıʌ

Reputation: 4512

I think that the JS is something like this (requires jquery.cookie.js):

$('a[data-toggle="tab"]').on('shown', function(e){

    //save the latest tab using a cookie:
    $.cookie('last_tab', $(e.target).attr('href'));

    });

    //activate latest tab, if it exists:
    var lastTab = $.cookie('last_tab');
    if (lastTab) {
        $('a[href=' + lastTab + ']').tab('show');
}

...and the HTML code:

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#pane1" data-toggle="tab"><i class="icon-wrench"></i>TAB 1</a></li>
    <li><a href="#pane2" data-toggle="tab"><i class="icon-warning-sign"></i>TAB 2</a></li>
    <li><a href="#pane3" data-toggle="tab"><i class="icon-resize-small"></i> TAB 3</a></li>
  </ul>
  <div class="tab-content">
    <div id="pane1" class="tab-pane active">Content 1</div>
    <div id="pane2" class="tab-pane">Content 2</div>
    <div id="pane3" class="tab-pane">Content 3</div>

  </div>
</div>

DEMO --> http://bootply.com/88234

Upvotes: 1

Related Questions