Rails with Bootstrap Tabs

Question

I have a rails 4 app.

I am trying to incorporate Bootstrap Tabs.

Reading the bootstrap docs, it says one way of doing this does not involve any js. I have tried each of the approaches in the docs but can't get any of them working in my app.

My current attempt is:

<ul class="nav nav-tabs nav-justified">
                    <li role="presentation" class="active"> <a href="#terms" aria-controls="terms" role="tab" data-toggle="tab">Terms</a></li>
                    <li role="presentation"> <a href="#privacy" aria-controls="privacy" role="tab" data-toggle="tab">Privacy</a></li>
                    <li role="presentation"> <a href="#licence" aria-controls="licence" role="tab" data-toggle="tab">Licence</a></li>
                    <li role="presentation"> <a href="#trust" aria-controls="trust" role="tab" data-toggle="tab">Trust</a></li>
                    <li role="presentation"> <a href="#reliance" aria-controls="reliance" role="tab" data-toggle="tab">Reliance</a></li>
                    <li role="presentation"> <a href="#pricing" aria-controls="pricing" role="tab" data-toggle="tab">Pricing</a></li>

                </ul>

<div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="terms"><%= render 'pages/legalpolicies/terms' %></div>
                <div role="tabpanel" class="tab-pane" id="privacy"><%= render 'pages/legalpolicies/privacy' %></div>

                <div role="tabpanel" class="tab-pane" id="licence"><%= render 'pages/legalpolicies/licence' %></div>
                <div role="tabpanel" class="tab-pane" id="trust"><%= render 'pages/legalpolicies/trust' %></div>

                <div role="tabpanel" class="tab-pane" id="reliance"><%= render 'pages/legalpolicies/reliance' %></div>
                <div role="tabpanel" class="tab-pane" id="pricing"><%= render 'pages/legalpolicies/pricing' %></div>

            </div>

The effect is to give me a tab bar across the top of the page. The tabs are clickable.

However all of the content in each of the separate tab content panes just displays in one big long page of text. The links don't work.

Can anyone see what's required to get this to work?

I read this statement in the docs:

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element.

I understand this to mean that no js is required.

Anyway, I tried making a privacy.js file in my javascripts folder and adding:

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

That didn't do anything.

I tried moving it to my application.js file. No difference. Is more js required? It's odd to me that this does anything since I don't have anything called #myTabs in the html. Is there something else that's required to get this to work?

Gem file has:

gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.5'

Style sheets has a file called: framework_and_overrides.css.css, which has:

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";

Javascripts folder has a file called application.js, which has:

//= require underscore
//= require gmaps/google
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require_tree .

So - following advice on the bootstrap-sass gem setup (for Ruby on Rails, I made changes to my stylesheets and js files.

Specifically, that gem says:

Then, remove all the *= require_self and *= require_tree . statements from the sass file. Instead, use @import to import Sass files.

Do not use *= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins or variables.

I changed the name of the application style sheet from application.css.scss to application.scss.

I changed the content of that file to:

 @import "framework_and_overrides.css.scss";
 @import "require_self";
 @import "require_tree .";
 */

I changed the content of my framework_and_overrides.css.scss file to include:

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "bootstrap-slider";

My application.js file has:

//= require underscore
//= require gmaps/google
//= require jquery
//= require bootstrap-sprockets
//= require bootstrap-slider
//= require jquery_ujs
//= require_tree .

This doesn't have a positive impact. It removes all the styling on my pages, removes all the bootstrap styling and generally messes everything up. It doesn't connect the tab links to the tab content.

I'm stuck -really trying to understand how to use Bootstrap Tabs in Rails 4. Any advice would be very much appreciated.

When I change it back, at least the styling is reflected, but the js tabs do not work (in either case).

ANOTHER ATTEMPT:

When I add import bootstrap to the top of my application.js:

@import "bootstrap";
//= require underscore
//= require gmaps/google
//= require jquery
//= require bootstrap
//= require bootstrap-sprockets
//= require bootstrap-slider
//= require jquery_ujs
//= require_tree .

The tabs across the top of the page in this example work so that the page is jumped down to where the start of the relevant text tab is. That's not what I want. I want the partial containing that text to display at the top of the page (and the text in each of the other partials to be hidden) - as is shown in the bootstrap example for tabs.

Answer 1

I read the following in Bootstrap DOC:

Using navs for tab panels requires JavaScript tabs plugin For tabs with tabbable areas, you must use the tabs JavaScript plugin. The markup will also require additional role and ARIA attributes – see the plugin's example markup for further details.

So you probably need to add to application.js:

//= require bootstrap

Including:

   //= require bootstrap-sprockets

Is not enough:

bootstrap-sprockets provides individual Bootstrap Javascript files (alert.js or dropdown.js, for example), while bootstrap provides a concatenated file containing all Bootstrap Javascripts