CODEWITHSUNDEEP
ruby-on-railslink-tobootstrap-sass
barney_bbq
barney_bbq

Reputation: 11

Rails bootstrap navigation link_to error

I want to make a navbar in rails according to this example: http://getbootstrap.com/javascript/#tabs

<div role="tabpanel">



<!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

However I want to use the link_to method to create a link. When I rewrite the first link as follows there is no problem:

    <li role="presentation" class="active"><%= link_to "Home", "#home", 'aria-controls'=>"home", role: "tab", data:{toggle: "tab"} %> </li>

However when I write this line as follows:

    <li role="presentation" class="active"><%= link_to "Home", root_path, 'aria-controls'=>"home", role: "tab", data:{toggle: "tab"} %> </li>

The Home tab doesn't work anymore and I get the following error in Google chrome: Uncaught Error: Syntax error, unrecognized expression: /

Any idea what I'm doing wrong?

Upvotes: 0

Views: 494

Answers (1)

barney_bbq
barney_bbq

Reputation: 11

I've solved this problem using the bootstrap helper gem: http://fullscreen.github.io/bh/# or go to https://rubygems.org/gems/bh to see all the versions.

After adding the gem and following the example code:

<%= nav do %>
  <%= link_to 'Home', root_path %>
  <%= link_to 'Users', users_path %>
  <%= link_to 'Profile', profile_path %>
<% end %>

The links are now working for me, including setting the class="active" for the correct link, which was most important for me. The bh gem is also very useful for setting the class="active" in the normal bootstrap navbar. Word of advice, I was having problems with the layout with version 1.3.3 so I downgraded to version 1.3.1 which is working well.

Upvotes: 1

Related Questions