9

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.

Mel
  • 2,481
  • 26
  • 113
  • 273
  • You should only require one Bootstrap JS file, not both. That might help. See [docs](https://github.com/twbs/bootstrap-sass). > bootstrap-sprockets and bootstrap should not both be included in application.js – vanburen Nov 13 '15 at 04:03
  • Yeah - I only added in '//= require bootstrap' to the application.js file because I was at a loss for what else I should try. I deleted it but still have the same problem – Mel Nov 13 '15 at 07:06
  • You need to include Javascript to initialize the tabs: http://getbootstrap.com/javascript/#tabs-usage. This might go into application.js, or into another .js file in your `/javascripts/` directory. – Lanny Bose Nov 13 '15 at 08:14
  • 1
    your html works for me: https://jsfiddle.net/rg6gkrn0/ – Aguardientico Nov 14 '15 at 03:33
  • is this a necessary part of the setup: @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); – Mel Nov 14 '15 at 03:34
  • I don't have ^^ in my file – Mel Nov 14 '15 at 03:35
  • can you show your gemfile? – davegson Nov 16 '15 at 13:46
  • Also I noticed a typo `framework_and_overrides.css.css` shouldn't that be scss instead of css? `framework_and_overrides.css.scss` – hamitron Nov 18 '15 at 17:44
  • It's autocorrect in this platform. the file is called css.scss. – Mel Nov 18 '15 at 18:51
  • This post may help you in a better way [How to get Twitter-Bootstrap navigation to show active link?](http://stackoverflow.com/questions/9879169/how-to-get-twitter-bootstrap-navigation-to-show-active-link) – Sohair Ahmad Nov 20 '15 at 07:00
  • This may help you in a better way. http://stackoverflow.com/questions/9879169/how-to-get-twitter-bootstrap-navigation-to-show-active-link – Sohair Ahmad Nov 20 '15 at 07:03
  • thanks Sohair, that's not what i want. I want to render static text for each tab in my set. At the moment, the text renders in one long page and the tabs just jump down to the top of the related section. That's not what I want. – Mel Nov 20 '15 at 08:28
  • What does the browser console show? Are there any JS errors or resource 404ing? – Troy SK Nov 23 '15 at 09:58

2 Answers2

2

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

bo-oz
  • 2,842
  • 2
  • 24
  • 44
  • Not sure which docs you are reading, but the docs say this: Markup 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. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling, while adding the nav and nav-pills classes will apply pill styling. – Mel Nov 18 '15 at 18:52
  • I had previously tried adding both bootstrap and sprockets to application.js. See comments above. It doesn't work. The docs for bootstrap sass say not to do it. I tried again just to check and it does not work – Mel Nov 18 '15 at 18:54
  • I copied these quotes from respectively the bootstrap official documentation (getbootstrap.com) and the SASS Bootstrap GEM (on Github). – bo-oz Nov 19 '15 at 06:25
  • Your HTML setup is correct, because that was confirmed by the fiddle of Aguardientico in the comments on your question.. so the only things wrong could be a javascript error elsewhere, the Javascript / CSS not loaded properly, or you are calling the tooltip code wrong. Can you confirm there's a method tab() inside your rendered .js file (when viewing source on localhost en clicking the link)? Also, do you have Firebug or some other Javascript console to check for errros in your code, it could also be caused by some other script as well, rendering jQuery inactive. – bo-oz Nov 19 '15 at 06:28
  • I copied my comment 4 above from bootstrap docs too (same website). I don't have any tooltips. I don't know how to check the inspect element. i can't find anything in the local host inspector. The only js in the privacy.js file is as set out above. I don't have anything anywhere else in the app called 'myTabs'. I don't know what that js is meant to do. It's certainly not doing anything. – Mel Nov 19 '15 at 08:45
  • Where I said tooltip I meant tab. To inspect if your .js includes a tab method, open the source code for your localhost (Alt + Cmd + U for chrome for mac, don't know for windows). Look for the file that looks something like: /assets/application-803a4159303d2a2401c2b82c10067bfd2eb0d2dc545e1507081abe2735dfe0f6.js, check that one for the existence of tab() method. – bo-oz Nov 19 '15 at 08:52
  • This should be present in your .js: `var Tab = function (element) { this.element = $(element) }` or something comparable depending on your bootstrap version. – bo-oz Nov 19 '15 at 08:53
  • I definitely don't have anything like the js you have typed above. I can't see anything that looks like that in the docs either. No - I don't have a bootstrap tab section in the js when I inspect that file. I have js for olark and google analytics, but not tabs. I tried moving the myTabs js from a file in my javascripts folder called privacy.js to the bottom of the view page, but that didn't work either. – Mel Nov 19 '15 at 09:03
  • If you don't have the Tab method, Tab won't work as it requires Javascript... take a look at the Bootstrap documentation. – bo-oz Nov 19 '15 at 09:15
  • The only method I have is the one set out above. I can't find anything in the docs that looks like the line you set out above. – Mel Nov 19 '15 at 09:35
  • Do you know where there are any tutorials for using bootstrap tabs with rails? – Mel Nov 19 '15 at 09:35
  • It's has really nothing to do with Rails since Rails is serverside. If you include the correct JS & CSS, have the correct HTML structure (which you have) and call the Tab() function from Bootstrap.js, then you are all set! If you do not have a Tab() method inside your .js you identified your problem! Now you can work on fixing it, by making sure the correct (CSS &) JS is present. – bo-oz Nov 19 '15 at 09:37
  • Please confirm that you understand that you DO need JS to achieve working Tabs in Bootstrap! http://getbootstrap.com/javascript/#tabs – bo-oz Nov 19 '15 at 09:39
  • http://getbootstrap.com/javascript/#tabs says you can use it without js. In any event I have something called myTabs (as above) in my js. I don't know whether that is what you're referring to as the Tab function. I don't know what 'myTabs' means. There is nothing in the file with that id. I don't know how to identify my problem. A tutorial for how to set up bootstrap tabs with rails may help. There is obviously skill involved in interpreting the bootstrap documents and construing them for a rails project. I can't figure it out and would appreciate if there is a tutorial showing how this works. – Mel Nov 19 '15 at 09:44
  • You are misunderstanding the documentation, there's no JS involved in toggling the Navigation of the tabs themselves, but there is for hiding / showing the content. That's why this part of the documentation is present in the section JAVASCRIPT. Just make sure your code includes the correct Bootstrap files. Especially //= require bootstrap (and not sprockets!) in application.js – bo-oz Nov 19 '15 at 09:47
  • Do you have a repo in which I can take a look? – bo-oz Nov 19 '15 at 09:48
1

Here's one way with extra styling to make the tabs look like what you would like.

For the rails links to work you will need to modify the javascript that shows hides content to either use turbolinks or similar.

        $(document).ready(function() {
            $(".tabs-menu a").click(function(event) {
                event.preventDefault();
                $(this).parent().addClass("current");
                $(this).parent().siblings().removeClass("current");
                var tab = $(this).attr("href");
                $(".tab-content").not(tab).css("display", "none");
                $(tab).fadeIn();
            });
        });
        body {
        padding: 20px;
        font-family: Arial, Helvetica, sans-serif;
        line-height: 1.5;
        font-size: 14px;
        }
        .tabs-menu {
        height: 30px;
        float: left;
        clear: both;
        }
        .tabs-menu li {
        height: 30px;
        line-height: 30px;
        float: left;
        margin-right: 10px;
        background-color: #ccc;
        border-top: 1px solid #d4d4d1;
        border-right: 1px solid #d4d4d1;
        border-left: 1px solid #d4d4d1;
        }
        .tabs-menu li.current {
        position: relative;
        background-color: #fff;
        border-bottom: 1px solid #fff;
        z-index: 5;
        }
        .tabs-menu li a {
        padding: 10px;
        text-transform: uppercase;
        color: #fff;
        text-decoration: none;
        }
        .tabs-menu .current a {
        color: #2e7da3;
        }
        .tab {
        border: 1px solid #d4d4d1;
        background-color: #fff;
        float: left;
        margin-bottom: 20px;
        width: auto;
        }
        .tab-content {
        width: 660px;
        padding: 20px;
        display: none;
        }
        #tab-1 {
        display: block;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="tabs-container">
            <ul class="tabs-menu">
                <li class="current"><a href="#tab-1">Tab 1</a></li>
                <li><a href="#tab-2">Tab 2</a></li>
                <li><a href="#tab-3">Tab 3</a></li>
                <li><a href="#tab-4">Tab 4</a></li>
            </ul>
            <div class="tab">
                <div id="tab-1" class="tab-content">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Nullam pretium, est at congue mattis, nibh eros pharetra lectus, nec posuere libero dui consectetur arcu. Quisque convallis facilisis fermentum. Nam tincidunt, diam nec dictum mattis, nunc dolor ultrices ipsum, in mattis justo turpis nec ligula. Curabitur a ante mauris. Integer placerat imperdiet diam, facilisis pretium elit mollis pretium. Sed lobortis, eros non egestas suscipit, dui dui euismod enim, ac ultricies arcu risus at tellus. Donec imperdiet congue ligula, quis vulputate mauris ultrices non. Aliquam rhoncus, arcu a bibendum congue, augue risus tincidunt massa, vel vehicula diam dolor eget felis.</p>
                </div>
                <div id="tab-2" class="tab-content">
                    <p>Donec semper dictum sem, quis pretium sem malesuada non. Proin venenatis orci vel nisl porta sollicitudin. Pellentesque sit amet massa et orci malesuada facilisis vel vel lectus. Etiam tristique volutpat auctor. Morbi nec massa eget sem ultricies fermentum id ut ligula. Praesent aliquet adipiscing dictum. Suspendisse dignissim dui tortor. Integer faucibus interdum justo, mattis commodo elit tempor id. Quisque ut orci orci, sit amet mattis nulla. Suspendisse quam diam, feugiat at ullamcorper eget, sagittis sed eros. Proin tortor tellus, pulvinar at imperdiet in, egestas sed nisl. Aenean tempor neque ut felis dignissim ac congue felis viverra. </p>
                </div>
                <div id="tab-3" class="tab-content">
                    <p>Duis egestas fermentum ipsum et commodo. Proin bibendum consectetur elit, hendrerit porta mi dictum eu. Vestibulum adipiscing euismod laoreet. Vivamus lobortis tortor a odio consectetur pulvinar. Proin blandit ornare eros dictum fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur laoreet, ante aliquet molestie laoreet, lectus odio fringilla purus, id porttitor erat velit vitae mi. Nullam posuere nunc ut justo sollicitudin interdum. Donec suscipit eros nec leo condimentum fermentum. Nunc quis libero massa. Integer tempus laoreet lectus id interdum. Integer facilisis egestas dui at convallis. Praesent elementum nisl et erat iaculis a blandit ligula mollis. Vestibulum vitae risus dui, nec sagittis arcu. Nullam tortor enim, placerat quis eleifend in, viverra ac lacus. Ut aliquam sapien ut metus hendrerit auctor dapibus justo porta. </p>
                </div>
                <div id="tab-4" class="tab-content">
                    <p>Proin sollicitudin tincidunt quam, in egestas dui tincidunt non. Maecenas tempus condimentum mi, sed convallis tortor iaculis eu. Cras dui dui, tempor quis tempor vitae, ullamcorper in justo. Integer et lorem diam. Quisque consequat lectus eget urna molestie pharetra. Cras risus lectus, lobortis sit amet imperdiet sit amet, eleifend a erat. Suspendisse vel luctus lectus. Sed ac arcu nisi, sit amet ornare tellus. Pellentesque nec augue a nibh pharetra scelerisque quis sit amet felis. Nullam at enim at lacus pretium iaculis sit amet vel nunc. Praesent sapien felis, tincidunt vitae blandit ut, mattis at diam. Suspendisse ac sapien eget eros venenatis tempor quis id odio. Donec lacus leo, tincidunt eget molestie at, pharetra cursus odio. </p>
                </div>
            </div>
        </div>
Abs
  • 3,902
  • 1
  • 31
  • 30
  • Hi Abs, no -that's not the styling or format I want. I want the styling I have (when the js does not work properly). – Mel Nov 20 '15 at 08:26
  • also - i can't use turbo links because i use olark – Mel Nov 20 '15 at 09:46