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.