javascript - Turbolinks and Bootstrap Tab activation -


i facing same problem described here, under additional context of rails' turbolinks.

i using piece of code

$(document).on('ready page:change', function() {     /* show tab anchor */     var hash = window.location.hash;     hash && $('ul.nav a[href="' + hash + '"]').tab('show');      /* update url anchor after selecting tab */     $('.nav-tabs a').click(function (e) {         $(this).tab('show');         var scrollmem = $('body').scrolltop();         window.location.hash = this.hash;         $('html,body').scrolltop(scrollmem);     }); 

which work manual page reload (f5) , cache restore, not after reloading page turbolinks click*.

*when clicking turbolinks link, if there cache of page, cache first restored , tab shown, thre still request server last contents, , once request arrives , parsed, tab "switches back" original one

my bootstrap code looks this

<ul class="nav nav-tabs" role="tablist">     <li class="nav-item">     <a class="nav-link active" data-toggle="tab" href="#student" role="tab"></a>     </li>     <li class="nav-item">     <a class="nav-link" data-toggle="tab" href="#mentor" role="tab"><%= </a>     </li>     <li class="nav-item">     <a class="nav-link" data-toggle="tab" href="#company" role="tab"></a>     </li> </ul>  <!-- tab panes --> <div class="tab-content">     <br />     <div class="tab-pane fade in active" id="student" role="tabpanel">         ...     </div>     <div class="tab-pane fade" id="mentor" role="tabpanel">         ...     </div>     <div class="tab-pane fade" id="company" role="tabpanel">         ...     </div> </div> 

rails 5 comes turbolinks 5. solution change name of event listener

$(document).on('ready turbolinks:load', function() { 

Comments