Foundation.js 5 MUST be included in BODY tag. #3643

seantimm · 2013-11-24T06:01:22Z

This is a bug IMHO. Worked in 4 in HEAD, why not 5?

mattd · 2013-11-23T03:45:57Z

I use Foundation in a require.js context. I attempted to upgrade from 4, and I'm seeing some very odd behavior that I'm fairly certain is related to this issue. (Require.js appends all scripts to the HEAD asynchronously, thus the issue.)

DanielKehoe · 2013-11-23T04:53:31Z

I've confirmed this bug.

I'd recommend avoiding Foundation 5 with Rails until this issue is resolved.

This bug means Foundation 5 is fundamentally incompatible with Rails 4.0. Since Rails 3.2, accepted best practice is to use the Rails asset pipeline, which means incorporating all JavaScript in the application.js file and referencing a single application.js file in the page HEAD section.

I didn't encounter any problem with this practice with Foundation 4.

Here are the relevant files from a simple Rails application to reproduce the issue.

# app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require foundation
//= require_tree .
$(function() {
  $(document).foundation();
});

# app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Test</title>
    <%= stylesheet_link_tag "application" %>
    <%# Modernizr is required for Zurb Foundation %>
    <%= javascript_include_tag "vendor/modernizr" %>
        <%# Foundation 5 won't work when application.js is included in HEAD %>
    <%= javascript_include_tag "application" %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    <header>
      <%# navigation styled for Zurb Foundation 5 %>
      <nav class="top-bar" data-topbar>
        <ul class="title-area">
          <li class="name"><%= link_to 'Home', root_path %></li>
          <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
        </ul>
        <div class="top-bar-section">
          <ul>
            <li><%= link_to 'About', root_path %></li>
            <li><%= link_to 'Contact', root_path %></li>
          </ul>
        </div>
      </nav>
    </header>
    <main role="main">
       <%= yield %>
    </main>
  </body>
</html>

The failure can be observed by clicking on the menu icon. Nothing happens (a dropdown menu should appear).

The JavaScript console shows many errors:

Uncaught TypeError: Layer must be a document node foundation.js?body=1:35
Uncaught ReferenceError: Foundation is not defined foundation.abide.js?body=1:4
Uncaught ReferenceError: Foundation is not defined foundation.accordion.js?body=1:4
Uncaught ReferenceError: Foundation is not defined foundation.alert.js?body=1:4
Uncaught ReferenceError: Foundation is not defined foundation.clearing.js?body=1:4
Uncaught ReferenceError: Foundation is not defined foundation.dropdown.js?body=1:4
Uncaught ReferenceError: Foundation is not defined foundation.interchange.js?body=1:4
Uncaught ReferenceError: Foundation is not defined foundation.joyride.js?body=1:6
Uncaught ReferenceError: Foundation is not defined foundation.magellan.js?body=1:4
Uncaught ReferenceError: Foundation is not defined foundation.offcanvas.js?body=1:4
Uncaught ReferenceError: Foundation is not defined foundation.orbit.js?body=1:373
Uncaught ReferenceError: Foundation is not defined foundation.reveal.js?body=1:4
Uncaught ReferenceError: Foundation is not defined foundation.tab.js?body=1:6
Uncaught ReferenceError: Foundation is not defined foundation.tooltip.js?body=1:4
Uncaught ReferenceError: Foundation is not defined foundation.topbar.js?body=1:4
Uncaught TypeError: Object [object Object] has no method 'foundation' application.js?body=1:18

fny · 2013-11-23T23:49:59Z

Foundation now initializes immediately from wherever you load the file (i.e. it's not wrapped in some JQuery(document).ready()-like function). Foundation 5 embeds FastClick and tries do attach it to document.body on initialization. Since there's no <body /> in the <head />, FastClick craps its pants.

Two fixes for now:

Remove the embedded FastClick from foundation.js, then do one of the following:
- Move that code to the end of the page
- Wrap it in a closure and stick it in $(document).ready()
- Nix it
Wrap all of Foundation in a closure and load it with $(document).ready() just to be safe.

FastClick should be an opt-in component, especially since it's not a true dependency of Foundation.

DanielKehoe · 2013-11-24T02:19:11Z

I tried wrapping $(document).ready around $(function() {$(document).foundation();}); but the problem persists. Maybe I didn't do it correctly? My JS skills are poor.

# app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require foundation
//= require_tree .
$(document).ready(function() {
    console.log( "ready!" );
    $(document).foundation();
});

I get errors in the JavaScript console:

Uncaught TypeError: Layer must be a document node foundation.js?body=1:35
Uncaught ReferenceError: Foundation is not defined foundation.abide.js?body=1:4
Uncaught ReferenceError: Foundation is not defined foundation.accordion.js?body=1:4
Uncaught ReferenceError: Foundation is not defined foundation.alert.js?body=1:4
Uncaught ReferenceError: Foundation is not defined foundation.clearing.js?body=1:4
Uncaught ReferenceError: Foundation is not defined foundation.dropdown.js?body=1:4
Uncaught ReferenceError: Foundation is not defined foundation.interchange.js?body=1:4
Uncaught ReferenceError: Foundation is not defined foundation.joyride.js?body=1:6
Uncaught ReferenceError: Foundation is not defined foundation.magellan.js?body=1:4
Uncaught ReferenceError: Foundation is not defined foundation.offcanvas.js?body=1:4
Uncaught ReferenceError: Foundation is not defined foundation.orbit.js?body=1:373
Uncaught ReferenceError: Foundation is not defined foundation.reveal.js?body=1:4
Uncaught ReferenceError: Foundation is not defined foundation.tab.js?body=1:6
Uncaught ReferenceError: Foundation is not defined foundation.tooltip.js?body=1:4
Uncaught ReferenceError: Foundation is not defined foundation.topbar.js?body=1:4
ready! application.js?body=1:19
Uncaught TypeError: Object [object Object] has no method 'foundation'

Have you tried it with success?

fny · 2013-11-24T03:03:56Z

You actually have to wrap _all of the Foundation code_ in a closure for that method to work. (Ridiculous, I know.)

It's more reasonable to remove the FastClick code and load it later if you wish. The rest of Foundation doesn't depend on it at all, so nothing else should break. In my experience everything has been working just fine without it, and no other part of the JS requires being placed at the end of the body.

This really needs to be fixed at the framework level. Who knows why Zurb decided to shove a minified, third-party library in a production release of Foundation... 😑

DanielKehoe · 2013-11-24T04:59:42Z

I'm using the gem 'foundation-rails'. So as far as I know, there's no possible way to remove the FastClick code. Is there?

I'm instructing beginners to use Foundation in a book I've written for Rails newcomers (here: http://learn-rails.com/learn-ruby-on-rails.html). So these workarounds are not realistic. Either it gets fixed or I rewrite the book to recommend another front-end framework that is compatible with Rails recommended practices.

seantimm · 2013-11-24T06:04:26Z

Hey all, the attached pull request will ensure that FastClick doesn't attempt to initialize until document ready which will resolve the issue with document.body not being available. @DanielKehoe, this pull request or a similar fix will land shortly, so don't be too concerned with this defect in a brand new release. Fixes are coming in quickly...

DanielKehoe · 2013-11-24T06:08:59Z

I'm happy to see the rapid iteration and the commitment to Rails users. That's why I've recommended the framework.

fny · 2013-11-24T06:31:39Z

Many thanks for the rapid update. 😄

mrsweaters · 2013-11-24T08:50:41Z

Merged!

…load Foundation.js 5 MUST be included in BODY tag.

chadoh · 2013-11-28T19:53:41Z

The gem on Rubygems is still not updated with this change. And I agree with @fny that including a minified version of a third party library within your own library is questionable.

fny · 2013-11-29T00:25:45Z

Especially when the third party library isn't a real dependency... I've submitted a pull request (#3706) that handles FastClick more wisely.

still not working however, waiting for foundation/foundation-sites#3643 to land in zurb gem

ndbroadbent · 2014-01-03T06:08:33Z

Please release a new gem version with this change soon, I'm also experiencing this issue.

avisra · 2014-01-05T22:00:50Z

When is this going to get updated? Still can't use requireJs without hacking the foundation.min.js file because of this FastClick issue.

fny · 2014-01-06T00:26:00Z

Apparently whenever they decide to release 5.0.3...

On Sun, Jan 5, 2014 at 5:01 PM, avisra notifications@github.com wrote:

When is this going to get updated? Still can't use requireJs without
hacking the foundation.min.js file because of this FastClick issue.

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/3643#issuecomment-31617000
.

zachlatta · 2014-01-06T00:29:10Z

Waiting on this as well :-/

DanielKehoe · 2014-01-06T00:44:44Z

Some transparency from Zurb would be welcome. If there's a reason 5.0.3 can't be released, let us know.

danpalmer · 2014-01-13T23:25:20Z

I'm waiting on this too, it's quite an annoying issue for new projects that are using Foundation 5 and Rails 4.

transat · 2014-01-14T06:29:12Z

Mark from Zurb has just told me to expect the update to 5.0.3 next week. They've been extremely busy.

tomascharad · 2014-01-15T17:13:23Z

I'm expecting the fix as well! ;)

DanielKehoe · 2014-02-16T21:50:16Z

This issue should be reopened. It seems the problem was fixed in foundation-rails 5.0.3 and broke again in foundation-rails 5.1.

See #4456

ryankbales · 2014-02-17T05:28:31Z

+1 ^

akkdio · 2014-02-18T20:28:50Z

+1^

DaniG2k · 2014-02-19T13:25:39Z

+1^

Foundations' javascript isn't behaving well with Rails 4 at all, despite the fact that I've disabled Turbolinks.

DanielKehoe · 2014-02-20T02:35:19Z

Maybe the Zurb team is not aware of this issue? I've opened a new issue:
#4494

novito · 2014-02-25T02:11:28Z

+1 - Dropdown not working.

benwoodward · 2014-02-27T05:13:03Z

+1 Dropdown not working

kdubel · 2014-03-01T14:56:32Z

+1

statwonk · 2014-03-02T18:08:34Z

+1

murdoch · 2014-03-04T02:13:29Z

+1 reveal modals acting a bit funky on rails 4.1

sangaz · 2014-03-05T14:25:48Z

+1
foundation 5.1.1.

paulthegeek · 2014-03-06T02:24:10Z

+1 Topbar Dropdown not working.

Matt888 · 2014-03-06T13:46:38Z

+1, it seems that with turbolinks or not, I can't put my JS in HEAD.

DanielKehoe · 2014-03-06T20:46:45Z

The gem foundation-rails version 5.2.0.0 (released March 6, 2014) resolves the issue.

mrsweaters · 2014-03-06T22:26:04Z

Sweet! Sorry it took us so long to get this resolved for you guys.

DanielKehoe · 2014-03-06T22:30:47Z

@mrsweaters thanks... have you got a process in place to test this before release, for the future? Would be nice to know we don't have to worry about regression.

kevinweaver · 2014-03-07T04:25:09Z

I am using rails 4.0.3 and foundation-rails 5.2.0.0, but still not getting dropdowns to work. Is this a confirmed fix?

javamuc · 2014-03-07T04:42:43Z

I too updated foundation to 5.2 in my Gemfile as well as the bower.json and dropdown menu in the topbar is still not working for me. Any advice?

DanielKehoe · 2014-03-07T05:46:54Z

I've got an example app anyone can try: https://github.com/RailsApps/rails-foundation

It worked for me but comment here if you encounter problems.

kevinweaver · 2014-03-07T16:21:41Z

Found a dropdown fix in a different thread. If you are using haml, add the data-topbar attribute to your top-bar like this:

%nav.top-bar{'data-topbar' => ''}

Matt888 · 2014-03-09T18:13:49Z

@DanielKehoe's demo app solved my problem and it's now working with Turbolinks, but I had to do this to initialize foundation in application.coffee:

ready = ->
$(document).foundation()

$(document).ready(ready)
$(document).on('page:load', ready)

vietqhoang · 2014-03-20T01:36:30Z

Anyone else having trouble with the off-canvas menu links not activating turbolinks with foundation-rails 5.2.0.0? Any links outside the off-canvas will activate turbolinks. Those in the off-canvas menu are ignored.

Reverting back to foundation-rails 5.1.1.0 fixes the issue.

Matt888 · 2014-03-20T17:20:12Z

Yeah I notice that on iPhone turbolinks doesn't seem to work for any of the off canvas links - the whole page gets reloaded.

jordanboston · 2014-03-24T23:02:11Z

I am having issues with the orbit slider not working with Foundation 5.2.1.0 and Rails 4.0.4

Page reloads and then slider breaks -tried jquery-turbolinks but the problem is not fixed. I am wondering if I should just move to Foundation 4 instead?

jordanboston · 2014-03-24T23:15:57Z

Foundation 4 works fine -guess I will avoid 5 for some time.

bingxie · 2014-04-09T00:38:39Z

I updated to 5.2.2, the issue is still there. so I used @Matt888 method to fix it.

chadoh · 2014-04-17T13:04:27Z

@ryankc33 I believe that setup will result in the turbolinks library not being included. See the note here:

Sprockets will not look for directives in comment blocks that occur after the first line of code.

Which means that it was turbolinks that was causing you problems. And I see why! 😊

Turbolinks MUST be included in the <head> tag, as they state in their docs:

As a rule of thumb when switching to Turbolinks, move all of your javascript tags inside the head and then work backwards, only moving javascript code back to the body if absolutely necessary.

chadoh · 2014-04-18T11:31:00Z

@ryankc33 sorry, I've never used jQuery.turbolinks. I quickly spotted your previous error and figured I'd chip in. (I'm wondering how related this bug was to your current problem. Maybe StackOverflow or a new bug report in which you help track down the cause would be a better use of your energies?)

ryankc33 · 2014-04-19T03:22:17Z

@chadoh you're right! It's a bug in my code, and unrelated to foundation and turbolinks. Will delete my other posts.

subimage mentioned this pull request Nov 23, 2013

Foundation 5 topbar incompatible with Rails Turbolinks #3642

Closed

DanielKehoe mentioned this pull request Nov 23, 2013

Foundation 5 requires JavaScript included in BODY not HEAD RailsApps/rails_layout#5

Closed

ghost assigned mhayes Nov 23, 2013

Modified FastClick initialization to delay until document ready.

d98a7d5

seantimm mentioned this pull request Nov 24, 2013

Remove hard-coded FastClick dependency; Fixes #3643 #3668

Closed

mrsweaters pushed a commit that referenced this pull request Nov 24, 2013

Merge pull request #3643 from seantimm/seantimm/issue-3643-fastclick-…

12ad42f

…load Foundation.js 5 MUST be included in BODY tag.

mrsweaters merged commit 12ad42f into foundation:master Nov 24, 2013

DanielKehoe mentioned this pull request Dec 7, 2013

Support Foundation 5 RailsApps/learn-rails#10

Closed

artemave added a commit to artemave/laundrette that referenced this pull request Dec 8, 2013

responsive top menu

90b7b14

still not working however, waiting for foundation/foundation-sites#3643 to land in zurb gem

mattmueller mentioned this pull request Jan 5, 2014

Updating javascript to foundation latest (master). foundation/foundation-rails#62

Closed

subimage unassigned mhayes Jan 10, 2015

Foundation.js 5 MUST be included in BODY tag. #3643

Foundation.js 5 MUST be included in BODY tag. #3643

Conversation

seantimm commented Nov 24, 2013

mattd commented Nov 23, 2013

DanielKehoe commented Nov 23, 2013

fny commented Nov 23, 2013

DanielKehoe commented Nov 24, 2013

fny commented Nov 24, 2013

DanielKehoe commented Nov 24, 2013

seantimm commented Nov 24, 2013

DanielKehoe commented Nov 24, 2013

fny commented Nov 24, 2013

mrsweaters commented Nov 24, 2013

chadoh commented Nov 28, 2013

fny commented Nov 29, 2013

ndbroadbent commented Jan 3, 2014

avisra commented Jan 5, 2014

fny commented Jan 6, 2014

zachlatta commented Jan 6, 2014

DanielKehoe commented Jan 6, 2014

danpalmer commented Jan 13, 2014

transat commented Jan 14, 2014

tomascharad commented Jan 15, 2014

DanielKehoe commented Feb 16, 2014

ryankbales commented Feb 17, 2014

akkdio commented Feb 18, 2014

DaniG2k commented Feb 19, 2014

DanielKehoe commented Feb 20, 2014

novito commented Feb 25, 2014

benwoodward commented Feb 27, 2014

kdubel commented Mar 1, 2014

statwonk commented Mar 2, 2014

murdoch commented Mar 4, 2014

sangaz commented Mar 5, 2014

paulthegeek commented Mar 6, 2014

Matt888 commented Mar 6, 2014

DanielKehoe commented Mar 6, 2014

mrsweaters commented Mar 6, 2014

DanielKehoe commented Mar 6, 2014

kevinweaver commented Mar 7, 2014

javamuc commented Mar 7, 2014

DanielKehoe commented Mar 7, 2014

kevinweaver commented Mar 7, 2014

Matt888 commented Mar 9, 2014

vietqhoang commented Mar 20, 2014

Matt888 commented Mar 20, 2014

jordanboston commented Mar 24, 2014

jordanboston commented Mar 24, 2014

bingxie commented Apr 9, 2014

chadoh commented Apr 17, 2014

chadoh commented Apr 18, 2014

ryankc33 commented Apr 19, 2014