How to get Twitter Bootstrap 3 to work with Rails 4 and Heroku

Question

I upgraded from Bootstrap 2.3.2 to 3 and now my dropdown menus no longer work. I've tried recompiling my assets for Heroku and have spent my coding time for the past couple days banging my head against a wall. Everything works in development, but not production. Here are the relevant files:

Gemfile:

    source 'https://rubygems.org'
ruby '2.0.0'

gem 'rails', '4.0.0'
gem 'bcrypt-ruby', '3.0.1'
gem 'faker', '1.1.2'
gem 'will_paginate', '3.0.4'
gem "will_paginate-bootstrap"

gem 'bootstrap-sass', github: 'thomas-mcdonald/bootstrap-sass'

group :development, :test do
  gem 'sqlite3', '1.3.8'
  gem 'rspec-rails', '2.13.1'
  gem 'guard-rspec', '2.5.0'
  gem 'spork-rails', '4.0.0'
  gem 'guard-spork', '1.5.0'
  gem 'childprocess', '0.3.9'
end

group :test do
  gem 'selenium-webdriver', '2.35.1'
  gem 'capybara', '2.1.0'
  gem 'factory_girl_rails', '4.2.1'
end

gem 'sass-rails', '~>4.0.1'
gem 'uglifier', '2.1.1'
gem 'coffee-rails', '4.0.0'
gem 'jquery-rails', '~>3.0.4'
gem 'turbolinks', '1.1.1'
gem 'jbuilder', '1.0.2'

group :doc do
  gem 'sdoc', '0.3.20', require: false
end

group :production do
  gem 'pg', '0.15.1'
  gem 'rails_12factor'
  gem 'rails_serve_static_assets'
end

Application.js:

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

If I put //= require bootstrap below the jquery or jquery_ujs requirements then the js breaks in development.

production.rb:

  config.cache_classes = true

  config.eager_load = true

  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = true

  config.serve_static_assets = true

  config.assets.js_compressor = :uglifier

  config.assets.compile = true

  config.assets.digest = true

  config.assets.version = '1.0'

  config.force_ssl = true

  config.log_level = :info

  # Precompile additional assets.
  # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
  # config.assets.precompile += %w( search.js )

  config.i18n.fallbacks = true

  # Send deprecation notices to registered listeners.
  config.active_support.deprecation = :notify


  # Use default logging formatter so that PID and timestamp are not suppressed.
  config.log_formatter = ::Logger::Formatter.new

What am I missing?

Answer 1

Sounds like an asset pipeline problem. I'd precompile assets locally making sure to delete them all, push to git, then compile again and push to git. Are there any errors in the console of your web browser? This question seems to come up quite a bit and you might want to have a look at these:

twitter bootstrap drop down suddenly not working

Javascript features work on localhost but not when deployed to Heroku

rails precompile Why javascript does not work locally but at heroku it works

Rails custom.css not working when deployed to Heroku

Answer 2

It looks like some things got messed up in my header and my assets were being called twice.

For the benefit of future generations, I was able to determine this by showing my page source code on localhost. On Heroku it wasn't visible because it was only showing the precompiled .js file. Showing my page source on the localhost I could see that I had everything, including dropdown.js, displayed twice. I fixed the double call to my assets and the javascript started working on Heroku again.

I certainly wish I had looked at that sooner because I spent 3 evenings of my coding time wrestling with it, looking at code that every source I could find told me should work, while it still didn't work!

Answer 3

I'm still on Rails 3, but I had the same problems with my dropdowns not working after updating to Bootstrap 3, plus they also seemed dependent on the order where I placed //=require bootstrap in my application.js file.

What I did to fix this was manually install Bootstrap files, just the css and js files into their respective folders, then deleted the //=require bootstrap line from my application.js file and also the *=require bootstrap from my application.css file.

I also made sure my gem file didn't have any old versions in it, running bundle install just to be sure.

The 'require_tree .' lines will pick up the bootstrap files from their respective folders, and my dropdowns work fine again.