Menu
I'm trying to upgrade my Ruby on Rails app from Foundation 4 to the newly-released Foundation 5, and the CSS switch is going relatively smoothly. However, I'm running into a problem switching the Javascript files.
When I switch out the Foundation 4 versions of the foundation.min.js and modernizr.js files and then reload a page, I get this weird JS error in the console:
Uncaught TypeError: Layer must be a document node foundation.js?body=1:35
FastClick foundation.js?body=1:35
FastClick.attach foundation.js?body=1:35
(anonymous function) foundation.js?body=1:40
(anonymous function)
I don't even know what FastClick does, but it appears to be included in Foundation 5 and it's stopping Foundation from loading. That, in turn, is causing all of my Foundation-dependent JS to fail as well.
Any help would be appreciated, thank you!
854
Update: v5.0.3 has been released, which resolves this issue. Be sure to update your foundation-rails gem accordingly.
This was a bug that was resolved in a commit that was merged into v5.0.3. This fix simply wraps an embedded library, FastClick, in jQuery's #ready(). You can solve this by including that version manually until v5.0.3 is released.
By moving the scripts to the bottom of the page, you're giving up Rails Turbolinks. Turbolinks requires that JavaScript is included in the <head /> since it wipes the <body /> with each request.
What's Going On
Foundation no longer waits for the DOM to load and instead executes immediately. For increased mobile performance, Foundation 5 embeds FastClick, a polyfill which removes click delays on browsers with touch UIs. Upon execution, Foundation immediately tries to attach FastClick to the document.body. If Foundation is initialized in the <head />, the body has yet to exist: document.body will reasonably return null causing FastClick to crap its pants.
166
Make sure to have both at the end of your <body> tag, not in the <head>.
This will throw the error:
<html>
<head>
</head>
<script src="/static/js/modernizr.js"></script>
<script src="/static/js/foundation.min.js"></script>
<body>
</body>
</html>
But this is going to work:
<html>
<head>
</head>
<body>
<script src="/static/js/modernizr.js"></script>
<script src="/static/js/foundation.min.js"></script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
