Yii 2.0: How to make bootstrap tabs remain active/selected after navigating to different web pages.

4 followers

Bootstrap tabs gets unselected/inactive when user navigates to other page and comes back. How to make bootstrap tabs remain active/selected after navigating to different web pages.

Steps : > 1: Add class dashboard_tabs_cl to <ul>.

<!-- Nav tabs -->
<ul class="nav nav-tabs dashboard_tabs_cl" role="tablist">

2: Add javascript to the page.

<?php $this->registerJs(
'$("document").ready(function(){
    if (typeof(Storage) !== "undefined") {
 
        var dash_localVar = localStorage.getItem("dash_activ_tab"+getUrlPath());
        if(dash_localVar){
 
            $(".dashboard_tabs_cl > li").removeClass("active");
            $(".tab-content > div").removeClass("active");
 
            var hrefAttr = "a[href=\'"+dash_localVar+"\']";
            if( $(hrefAttr).parent() ){
                $(hrefAttr).parent().addClass("active");
                $(""+dash_localVar+"").addClass("active");
            }
 
        }
 
        $(".dashboard_tabs_cl a").click(function (e) {
            //alert(window.location.pathname);                  
            e.preventDefault();
            localStorage.setItem("dash_activ_tab"+getUrlPath(), $( this ).attr( "href" ));
        });
        function getUrlPath(){
            var returnVar = "_indexpg";
            var splitStr = window.location.href;
            var asdf = splitStr.split("?r=");
            if(asdf[1]){
                var furthrSplt = asdf[1].split("&");
                if(furthrSplt[0]){
                    returnVar = furthrSplt[0];
                }else{
                    returnVar = asdf[1];
                }
            }
            return returnVar;
        }
    }
    });'
); ?>

Done!.

Total 4 comments

#19954 report it
emrald at 2016/10/07 11:38am
code changed

To : beate Plz Change the line and check: code changed

var hrefAttr = "a[href=\'"+dash_localVar+"\']";

for bug :

Error: Syntax error, unrecognized expression: a[href=#w4-tab1]
#19952 report it
beate at 2016/10/06 12:07pm
No hard code tab id

I don't use any tab id, only

echo Tabs::widget([
    'encodeLabels' => false,
    'navType' => 'nav-tabs dashboard_tabs_cl',
    'items' => [...]]);

But I have more than 1 tabs on my page, I have a panel and each has these tabs. I use firefox 49/mac.

#19951 report it
emrald at 2016/10/06 05:18am
Code updated. there should be no error in javascript, There is no need to hard code any tab id
Error: Syntax error, unrecognized expression: a[href=#w4-tab1]
throw new Error( "Syntax error, unrecognized expression: " + msg );

There is no need to hard code any tab id , You just need to add class as describe and the the javascript code in bottom. Code is full generic to handle everything by self. Thanks for updating mistake, code updated.

Moreover: plz provide browser used and its version on which error occurred.

#19950 report it
beate at 2016/10/05 11:21am
Thanks for the idea and code!

I just inserted this in my code.

First:

})

is missing at the end.

Second, there is an error:

Error: Syntax error, unrecognized expression: a[href=#w4-tab1]
throw new Error( "Syntax error, unrecognized expression: " + msg );

So it doesn't work here...

Leave a comment

Please to leave your comment.