Rails - Bootstrap setup

Question

I am trying to get bootstrap javascript working in my rails 4 app.

I asked these questions but haven't been able to get any help.

https://stackoverflow.com/questions/33685338/rails-with-bootstrap-tabs
https://stackoverflow.com/questions/33852687/rails-4-bootstrap-date-picker

I am increasingly feeling defeated by this challenge. It's depressing that bootstrap is described as a simple tool for rails. I would be happy to pay USD100 if someone could help be solve this problem.

My problem is specifically with the javascript functions. My tabs don't work. When you click the link, nothing happens. Also, the date picker doesn't work (I was expecting a calendar to pick a date in a single click).

In my gem file I have:

gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.5'
gem 'font-awesome-sass', '~> 4.4.0'
gem 'bootstrap-slider-rails'
gem 'bootstrap-datepicker-rails'
gem 'jquery-rails'

In my application.html.erb, I have:

<link href='http://fonts.googleapis.com/css?family=Quicksand|Roboto:300' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="p:domain_verify" content="44c82789b3dcecac427e4b65123fb68d"/>
        <title><%= content_for?(:title) ? yield(:title) : "RE" %></title>
    <meta name="description" content="<%= content_for?(:description) ? yield(:description) : "Ae" %>">
          <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => false %>
          <%= javascript_include_tag "application", "data-turbolinks-track" => false %>
          <%= csrf_meta_tags %>
          <%= favicon_link_tag %>
          <script src="https://www.google.com/jsapi"></script>
          <script src="https://www.youtube.com/iframe_api"></script>

Turbolinks is off because i use olark.

In my stylesheets folder, I have files called:

application.css.scss:

 *= require_framework_and_overrides.css.scss
 *= require bootstrap-datepicker
 *= require_self
 *= require_tree .
 */

Following comments set out below, I changed this file to be named application.scss and changed the order and referencing to:

*= require_tree .
 *= require_self
 *= require framework_and_overrides.css.scss
 *= require bootstrap-datepicker
 */

framework_and_overrides.css.scss

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

In my javascript folder, I have a file called:

application.js:

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

project_dates.coffee.js

 $(document).on "focus", "[data-behaviour~='datepicker']", (e) ->
 - $(this).datepicker
 - format: "dd-mm-yyyy"
 - weekStart: 1
 - autoclose: true

Then, In my view I am trying to use bootstrap tabs, so that clicking on a tab renders a partial beneath the links bar:

<div class="containerfluid">

        <div class="row" style="margin-top:50px">
            <div class="col-xs-10 col-xs-offset-1">
                <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>

        </div>


    <div class="row">
        <div class="col-xs-10 col-xs-offset-1">
            <div class="intpolmin" style="margin-top: 50px; margin-bottom: 30px"> 
             We give meaning to other words used in these terms and policies throughout, and identify those words as having an ascribed meaning, with <em>emphasised</em> text.
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-8 col-xs-offset-2">
            <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>
        </div>
    </div>
</div>  

Nothing at all happens when you click on the links.

In my project dates form, I have this form field:

<%= f.date_select :start_date, :label => "When does this project begin?", 'data-behaviour' => 'datepicker', order: [:day, :month, :year] %>

It does not make a date picker. Instead it's just three separate fields for d/m/y. Also, the label doesn't display -but I can work around that problem.

Is there something wrong with my setup?

When I change my application.js to remove:

//= require bootstrap

Then the js works so that when you click one of the tab links across the top, it jumps down a long page of text to the point where the relevant text starts. That's not what I want. I want to click on the tab link and for that to cause the relevant partial to render beneath the links (and all of the other partials not to render).

There are no changes to the date picker problem that result from this change to the application.js

When I try adding:

Bundler.require(:default, Rails.env)

to my config/application.rb (as per this post Bootstrap-sass gem Javascript not Working in Rails 4)

I get no different result to the problems outlined above

When I try adding

//= require bootstrap-sprockets

to my application.js (after jquery), the js stops working - so that when i click the link in the tabs menu, nothing at all happens

I am aware the user guide for https://github.com/twbs/bootstrap-sass says:

bootstrap-sprockets and bootstrap should not both be included in application.js.

For that reason, I removed bootstrap from my application.js.

I am also aware that the user guid for that gem says:

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

I still have this in my application.css.scss:

 *= require_framework_and_overrides.css.scss
 *= require bootstrap-datepicker
 *= require_self
 *= require_tree .
 */

I read the gem documentation as meaning I am doing something wrong by keeping these require files in my css - but the gem documentation doesnt tell you what to use instead.

It says:

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

How do you do this?

Entire gem file is copied below:

source 'https://rubygems.org'


# ------------------ Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.4'


# ------------------ Use postgresql as the database for Active Record
gem 'pg'

# ------------------ Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.5'
gem 'font-awesome-sass', '~> 4.4.0'
gem 'bootstrap-slider-rails'
gem 'bootstrap-datepicker-rails'

# ------------------ Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'


# ------------------ Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'

# ------------------ See https://github.com/rails/execjs#readme for more supported runtimes
gem 'therubyracer', platforms: :ruby

# ------------------ Use jquery as the JavaScript library
gem 'jquery-rails'


# ------------------ Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
# gem 'turbolinks'


# ------------------ Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'


# ------------------ bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc

# ------------------ Use ActiveModel has_secure_password
gem 'bcrypt', '~> 3.1.7'

# ------------------ Use Unicorn as the app server
# gem 'unicorn'

# ------------------ Use Capistrano for deployment
# gem 'capistrano-rails', group: :development


# ----------- USERS

# ------------------ authentication

gem 'devise', '3.4.1'
gem 'devise_zxcvbn'
gem 'omniauth'
gem 'omniauth-oauth2', '1.3.1'
gem 'omniauth-google-oauth2'
gem 'omniauth-facebook'
gem 'omniauth-twitter'
gem 'omniauth-linkedin-oauth2'
gem 'google-api-client', require: 'google/api_client'
# gem 'oauth2'
# ------------------ authorisation

gem 'pundit'

# ------------------ user roles

# ------------------ messaging

# ------------------ money

gem 'money-rails'

# ----------- CONTENT

gem 'state_machine'
gem 'acts_as_approvable'


# ------------------ file uploads
gem 'carrierwave'
gem 'mini_magick'
gem 'simple_form'

# ------------------ video
gem 'yt', '~> 0.25.5'
gem 'vimeo'

# ------------------ organisation
gem 'acts-as-taggable-on', '~> 3.4'

# ------------------ search

# ----------- OTHER

# ------------------ security

gem 'figaro'

# ------------------ performance
gem 'rails-observers'
gem 'high_voltage', '~> 2.4.0'

# ------------------ location

gem 'geocoder'
gem 'gmaps4rails'
gem 'underscore-rails'

gem 'country_select'

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> in views
  gem 'web-console', '~> 2.0'

  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
end

group :production do
  gem "rails_12factor"
end

ruby "2.2.2"

Watching this video - https://gorails.com/episodes/styling-with-bootstrap-sass

The setup appears super simple, but this tutorial does not amend the file to remove references to require as the gem documentation suggests (but which I have not done) but this tutorial still works to get bootstrap working. Is there ANYTHING anyone can see that I might try? On the brink...

As you can see - I have been trying at this for more than a year. I've been to monthly meet ups, paid code mentors and hired contractors who haven't been able to help. Hoping for a miracle on this board. Bootstrap Sass with Rails 4

TRYING RESCUE SOLUTION BELOW:

So, I now have:

stylesheets as follows:

application.css

 *= require_tree .
 *= require_self
 */

custom.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";

framework_and_overrides.css.scss:


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

javascript files as follows:

application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

application.html.erb:

<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => false %>
              <%= javascript_include_tag "application", media: 'all', "data-turbolinks-track" => false %>

gemfile:

gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.5.1'
gem 'font-awesome-sass', '~> 4.4.0'
gem 'bootstrap-slider-rails'
gem 'bootstrap-datepicker-rails'

When I save all of this and complete the suggested steps, there is no change to the above. I click a link in the tab links across the top, the little box at the bottom of the screen says 'go to #[name of link tab] on this page, but nothing happens.

Answer 1

You are in configuration hell, and I have built a minimal working product to get you out of there. In order to achieve this, we tackle your problems in order of their appearance and do not try to solve them in parallel. This answer focuses on your first question and probably solves the others.

The copy of the project's Readme follows. In case you need access to the product, just let me know.

README

This is a demo application to help stackoverflowuser "user2860931" with issues as mentioned here.

Questions are listed in chronological order:

[Q1] November, 13 Rails with Bootstrap Tabs

[Q2] November, 22 Rails 4 - Bootstrap date picker

[Q3] November, 24 Rails - Bootstrap setup

Problem Description

Many configuration attempts have been made and a suboptimal development environment probably interrupted rails naming conventions by adding file extensions.

Versions Used

Rails 4.2.5

Steps To Create This Application By Yourself

First check for an appropriate rails version

$ rails --version

1. Make sure the development environment (IDE) does not add file extensions by itself

2. Creating a new rails application

   
   $ rails new rescue
   

3. Locate the Gemfile of the application created under 1. and comment out the turbolinks gem entry Remove explanatory links for visual clarity

4. Add the following lines to you Gemfile (one might want to fix gems to a particular version in order to avoid an application to stop working by an unplanned update, but this is another issue)

   
   gem 'bootstrap-sass' #,          '3.3.5.1'
   

5. Run

   
   $ bundle exec bundle update
   $ bundle exec bundle install
   

6. Create the file app/assets/stylesheets/custom.css.scss and add the following lines:

   
   @import "bootstrap-sprockets";
   @import "bootstrap";
   

7. Add the following line to app/assets/javascripts/application.js

   
   //= require bootstrap
   

   IMPORTANT: This line has to follow the lines of jquery and jquery-ujs and before the require_tree directive so that the resulting file looks like:

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

   NOTE: We have deleted the line for turbolinks, to reflect the production system's setup of user "user2860931" (stackoverflow).

8. After saving all edited files, check whether the development environment has altered the file extensions (just to be sure this time)

   
     .
     ├── app
     │   ├── assets
     │   │   ├── images
     │   │   ├── javascripts
     │   │   │   └──application.js  
   
     │   │   └── stylesheets
     │   │       ├── application.css
     │   │       └── custom.css.scss
   

9. Generate a minimal controller together with action and related view

   
   $ rails generate controller planets index
   

10. Start the server

    
    $ rails s
    

11. Visit in your browser

    
    http://localhost:3000/planets/index
    

12. Last step to remove turbolinks completely

    1. View the HTML sourcecode of the site mentioned under 11.

    2. From file app/views/layouts/application.html.erb remove all data-turbolinks-track attributes so that the ERB code looks like:

       
       <%= stylesheet_link_tag    'application', media: 'all' %>
       <%= javascript_include_tag 'application' %>
       

    3. Repeat step 1. and note the difference

13. Visit the file app/views/planets/index.html.erb and replace with your HTML as listed in [Q1]

14. This setup renders your partials under the correct tabpanel. Be advised that that you are working in the development environment of Rails. A call to

    
    $ rake assets:clean
    $ rake assets:precompile
    

    could be needed in order to see changes once you deploy your main project (it should not be needed in Rails development mode).

    Tip: Use mock data files as arguments for the render function.

    
    app
    │   └── views 
    
    │       │ 
    │       └── planets
    │           ├── _dummy00.html.erb
    │           ├── _dummy01.html.erb
    │           ├── _dummy02.html.erb
    │           ├── _dummy03.html.erb
    │           ├── _dummy04.html.erb
    │           ├── _dummy05.html.erb
    
    

and use calls to render 'planets/dummy05' in your HTML of Q1. Make sure each dummy file contains slightly different data, in order to be able to check for working tabs.

The mock-up result provides tabs via bootstrap and looks like this .

Tabs are working as expected.

By providing you with the minimal working product, you should be enabled to bring your setup to a working state.

After all the preparation, adding a datepicker by just following the official documentation works, which answers Q2:

Sources Used To Provide This Answer

https://www.railstutorial.org/ by Michael Hartl

http://getbootstrap.com/components/#nav

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

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

http://guides.rubyonrails.org/asset_pipeline.html

Answer 2

I encountered the same issue you do and found a solution (digging in the deep web) that worked for me. Try adding the requirements after the line require_tree . in the .css file, and in the .js file just the datepicker you use; as below:

application.css

 ...
 *= require_tree .
 *= require_self
 *= require bootstrap
 *= require bootstrap-datepicker
 */

application.js

...
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
//= require bootstrap-datepicker

It is related to the asset pipeline of Ruby on Rails, you can go further on this topic in this page http://guides.rubyonrails.org/asset_pipeline.html , but first try changing the order of the lines.