Javascript features work on localhost but not when deployed to Heroku
Solution 1
I also had similar problem but the problem was happening on localhost as well.
You are probably using rails-bootstrap gem. It installs a file bootstrap.coffee.js This file was culprit. It had .popover use and relevant plugin was not included. I commented that out as I was not using it anyway but you should consider including the popover plugin for bootstrap.
Solution 2
Manually precompiling worked for me.
bundle exec rake assets:precompile
before you push to heroku.
Solution 3
I had the exact same issue (I'm very new to Rails). I eventually solved the issue by rearranging the order of files within application.js:
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
For the javascripts to work in development, "require jquery" needed to be after "require twitter/bootstrap." In production, jquery needed to come first. Not sure what caused this, but it now works when deployed to Heroku.
I used these two posts:
javascript - Twitter bootstrap jquery plugins not compiled for production
twitter bootstrap drop down suddenly not working
Solution 4
Check your production.rb file. I believe the line needs to be:
config.assets.compile = true
I believe this gets set to false by default.
Solution 5
Remember that everything that you would normally do on localhost, you must be doing with heroku. Make sure you heroku run rake assets:precompile
.
Alex De Simone
Updated on June 06, 2022Comments
-
Alex De Simone about 2 years
I've noticed that when I deploy to Heroku, javascript features dont work (such as Bootstrap Popover, Buttons, etc). I'm working with rails 3.2.2, ruby 1.9.3. The features work on localhost. There appear to be no errors displayed when deployed to Heroku (the features simply don't show up).
Any ideas? Thanks!
-
eziegl about 10 yearsThis seems to be the way to go if you manually include bootstrap.js and bootstrap.css instead of using the gem
-
Greg over 8 yearsRails 4.2.5 update: //= require jquery //= require jquery_ujs //= require bootstrap //= require angular //= require 'leaflet.js' //= require leaflet //= require_tree . Dropdowns work on Heroku, but bootstrap needs to be second on localhost. Is there a way to fix this or at least have it work on both Heroku and localhost without changing application.js? PS. Can't seem to format comments.
-
Alex about 8 yearsWarning: Richard Hulse advises not to turn this on here: stackoverflow.com/questions/8821864/…
-
Kick Buttowski almost 7 yearsI followed what you said and as soon as I deleted my coffee file , all is working, yet I wanna know do you have any source to back your claim?
-
Kick Buttowski almost 7 yearsheroku does that for ya