Bootstrap Togglable tabs rails

Question

I want to use the Togglable Tabs from Twitter's Bootstrap on a Rails app, but I can't make it work.

Here is my app/views/pages/home.html.erb :

<ul class="nav nav-tabs" id="dashboard_products">
  <li class="active"><a href="#owned_products"> 1 </a></li>
  <li><a href="#borrowed_products"> 2 </a></li>
  <li><a href="#given_products" > 3 </a></li>
  <li><a href="#requested_products"> 4 </a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="owned_products"> 1 </div>
  <div class="tab-pane" id="borrowed_products" > 2 </div>
  <div class="tab-pane" id="given_products" > 3 </div>
  <div class="tab-pane" id="requested_products" > 4 </div>
</div>

And here is my app/assets/javascripts/pages.js.coffee :

$ ->
  $('#dashboard_products a').click = (e) ->
    e.preventDefault() 
    $(this).tab('show')

And here my app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .

Where did I fail ?

Answer 1

You are missing the data-toggle tag.

Here is an example:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span8 well">
            <ul class="nav nav-tabs">
                <li class="active"> <a href="#home" data-target="#home" data-toggle="tab">Home</a>

                </li>
                <li><a href="#profile" data-target="#profile" data-toggle="tab">Profile</a>

                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active fade in" id="home">home tab content</div>
                <div class="tab-pane" id="profile">profile tab content</div>
            </div>
        </div>
    </div>
</div>

DEMO

Answer 2

Check if you have included bootstrap js ...and also check you include coffee script file after you include bootstrap js. and coffee script include must also be after your html. as dom must create the element before init tabs..