Bootstrap/Tabs: remember active tabs

[RomeroMsk]

Just a feature request: config option to "remember" active tab in Tabs widget (to activate last opened tab after reloading the page).
It is not so hard to implement with application JS, but can be a feature of widget. We need to register just two event handlers:

1. Set location.hash on tab click:

$(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
    location.hash = e.target.hash;
});

We need this because of https://github.com/twbs/bootstrap/blob/master/js/tab.js#L126
2. On document ready activate the tab:

$(document).ready(function() {
    if (location.hash.length) {
        $('[data-toggle="tab"], [data-toggle="pill"]').filter('[href="' + location.hash + '"]').tab('show');
    }
}

[SDKiller]

Isn't it better to use cookie?

If their are other anchors on page - not related to tabs - and user navigates them - location.hash will be overwritten.

[RomeroMsk]

Yes, we can use cookie for this - it is easy too.

[Ragazzo]

usually user storage in browser is used

[RomeroMsk]

@Ragazzo, if you mean localStorage then we need to check if it is supported by browser.

[Ragazzo]

all modern browser supports it . Also i saw it already used in Yii2 in some widget or debug module

[RomeroMsk]

The key word is modern. Debug module is for devs (who use modern browsers), but not application users. We can degrade to cookies if browser doesn't support localStorage or just make a note in docs about it :)

[Ragazzo]

Can you show what browsers does not support it since it is HTML5 and we also use in Yii2 some HTML5 features and tags ? Also since browsers updates very quickly i dont think it is a problem

[philippfrenzel]

I think you can implement the localStorage by default and if someone wants to be "bullet"browser"proof" you can make a comment about cookie storage

[RomeroMsk]

http://caniuse.com/#feat=namevalue-storage
Yes, it is not a big problem.

[Sammaye]

Bootstrap 3.0 is only supported on browsers (and works) that support localstorage, you kinda in the wrong business if you are supporting old browsers (except for Opera Mini of couse :).

[Ragazzo]

So as we see here it is not a problem and we should use local storage

[RomeroMsk]

As I said earlier: yes, it is not a big problem. We can use localStorage for this, I'm convinced :)

[Forin]

Workaround until this feature is added to Yii 2.1:
Add this to your view:

<?php
$script = <<< JS
    $(function() {
        //save the latest tab (http://stackoverflow.com/a/18845441)
        $('a[data-toggle="tab"]').on('click', function (e) {
            localStorage.setItem('lastTab', $(e.target).attr('href'));
        });

        //go to the latest tab, if it exists:
        var lastTab = localStorage.getItem('lastTab');

        if (lastTab) {
            $('a[href="'+lastTab+'"]').click();
        }
    });
JS;
$this->registerJs($script, yii\web\View::POS_END);
?>

[yii-bot]

Issue moved to yiisoft/yii2-bootstrap#104