Loading trays

Question

I want to use Togglable Tabs from Twitter Bootstrap in a Rails application, but I cannot get it to work.

Here is my application /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 application / assets / javascripts / pages.js.coffee :

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

And here is my application / 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

Make sure you include bootstrap js ... and also make sure you include the coffee script file after enabling bootstrap js. and coffee script include should also be after your html. since dom must create an element before init tabs.

Answer 3

Example here

http://getbootstrap.com/javascript/#tabs

does not have a data-target attribute.

 <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab" data-target="home">Home</a></li> 

But when I add it

 <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> 

Everything worked.