2

I am basically facing the same problem as described here, under the additional context of Rails' Turbolinks.

I am using this piece of code

$(document).on('ready page:change', function() {
    /* Show tab from 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 does work for manual page reload (F5) and for cache restore, but not after reloading the page from a Turbolinks click*.

*When clicking a turbolinks link, if there is some cache of the page, then that cache is first restored and the good tab is shown, but then thre is still a request to the server to get the last contents, and once that request arrives and is parsed, the tab "switches back" to the original one

My bootstrap code looks like 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>
Community
  • 1
  • 1
Cyril Duchon-Doris
  • 12,964
  • 9
  • 77
  • 164

1 Answers1

2

Rails 5 comes with Turbolinks 5. The solution was just to change the name of the event listener

$(document).on('ready turbolinks:load', function() {
Cyril Duchon-Doris
  • 12,964
  • 9
  • 77
  • 164