CODEWITHSUNDEEP
ruby-on-railsherokuruby-on-rails-4zurb-foundation
swelet
swelet

Reputation: 8702

Rails 4, Heroku, Zurb Foundation 5

I am developing a site using Foundation 5 that I'm hosting on Heroku. Yesterday all the Foundation widgets that are dependent on javascript stopped working on Heroku. In my case this means all my modals and my orbit slider. It still works flawlessly on my local machine.

I'm always precompiling my assets (rake assets:precompile) and commiting the compiled version before pushing to Heroku with git.

I've tried down and upgrading between Foundation versions 5.0.2.0 and 5.0.3.1 and a few other things but I'm just stumped on where to even start. I'm not too good with javascript debuggning either.

Production.rb
  # Disable Rails's static asset server (Apache or nginx will already do this).
  config.serve_static_assets = true

  # Compress JavaScripts and CSS.
  config.assets.js_compressor = :uglifier
  # config.assets.css_compressor = :sass

  # Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = true

  # Generate digests for assets URLs.
  config.assets.digest = true

  # Version of your assets, change this if you want to expire all your assets.
  config.assets.version = '1.0'

-

application.js
//= require jquery
//= require jquery_ujs
//= require jquery.touchcarousel-1.2.min
//= require foundation
//= require jquery.ui.button
//= require jquery.tap.min
//= require modernizr

//= require jquery-fileupload/basic
//= require_tree .

$(function(){ $(document).foundation(); });

//$('#TjuvkikModal').foundation('reveal', 'open');
//$('#ExempelobjektModal').foundation('reveal', 'open');

Upvotes: 4

Views: 959

Answers (1)

swelet
swelet

Reputation: 8702

I finally found the solution to this problem. It seems that Foundation wasn't initialized by:

$(function(){ $(document).foundation(); });

in my application.js (see above). When i pasted it into the end of applicaton.html as a script tag like so:

<%= javascript_include_tag "application" %>
<script type="text/javascript">$(function(){ $(document).foundation(); });</script>
</div>

it suddenly started working. This seems crazy to me. The script tag is the very next line of code that gets read after application.js. Why would this make any difference? And only on Heroku? If anyone knows the answer please comment and shed some light!

Upvotes: 5

Related Questions