CODEWITHSUNDEEP
javascriptjquerycssruby-on-railsmaterialize
Patrick Long
Patrick Long

Reputation: 11

Tabs in Materialize CSS and Ruby on Rails

I'm new to Ruby on Rails and I'm having a hard time setting up tabs. The tabs are displayed but I have an issue when the page refreshes.

Everytime the page refreshes the tabs do not stay on the current active tab, it reverts to the first tab. Also the tab ids do not display in the URL.

I'm using Ruby on Rails and Materialize CSS.

Thanks!

HTML 

<div class="col s12">
  <ul class="tabs" id="tabs">
    <li class="tab col s3"><a href="#tabs-1">Learning</a></li>
    <li class="tab col s3"><a href="#tabs-2">Setting Up</a></li>
    <li class="tab col s3"><a href="#tabs-3">Milestones</a></li>
    <li class="tab col s3"><a href="#tabs-4">Personal Survey</a></li>
  </ul>
</div>

<div id="tabs-1" class="col s12">
  <h5>Tab Content</h5>
</div>

<div id="tabs-2" class="col s12">
  <h5>Tab Content</h5>
</div>

<div id="tabs-3" class="col s12">
  <h5>Tab Content</h5>
</div>

<div id="tabs-4" class="col s12">
  <h5>Tab Content</h5>
</div>

Js

<script>
  $(document).ready(function(){
    $('ul.tabs').tabs('select_tab', 'tab_id');
  });
</script>

UPDATE

I tried to store the active Tabs ID in local storage but I'm not sure if I'm doing it correctly. Chrome shows that nothing is getting stores in my Local Storage. 

Im on Rails using Materialize CSS with JQuery Plugin. 

    $("#tabs").tabs({
      active: localStorage.getItem("currentIdx"),
      activate: function(event, ui) {
          localStorage.setItem("currentIdx", $(this).tabs('option', 'active'));
      }
    });

Upvotes: 1

Views: 622

Answers (1)

Don
Don

Reputation: 1334

if you don't want selected tab information to be lost when the page is reloaded, you will need to use cookies/session-storage to save last active tab and make the saved tab active again when page reloads.

Upvotes: 1

Related Questions