Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Foundation 5 topbar incompatible with Rails Turbolinks #3642

Closed
DanielKehoe opened this issue Nov 23, 2013 · 4 comments
Closed

Foundation 5 topbar incompatible with Rails Turbolinks #3642

DanielKehoe opened this issue Nov 23, 2013 · 4 comments

Comments

@DanielKehoe
Copy link

I've built a simple Rails application that includes a Foundation 5 topbar. Here are the relevant files, in an implementation that works:

# 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", media: "all" %>
    <%# Modernizr is required for Zurb Foundation %>
    <%= javascript_include_tag "vendor/modernizr" %>
    <%= 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>
    <%= javascript_include_tag "application" %>
  </body>
</html>

If I add Rails Turbolinks, the implementation fails.

Many Rails developers will attempt to use Turbolinks since Turbolinks is part of a standard Rails build. Turbolinks is part of a standard Rails build, with any new Rails application.

Here are the same files, with Turbolinks enabled:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= 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><%= content_for?(:title) ? yield(:title) : "Learn Rails" %></title>
    <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
    <%# Modernizr is required for Zurb Foundation %>
    <%= javascript_include_tag "vendor/modernizr" %>
    <%= 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>
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
  </body>
</html>

The JavaScript console shows an error:

Uncaught TypeError: Cannot read property 'scrolltop' of undefined foundation.topbar.js?body=1:93
@DanielKehoe DanielKehoe mentioned this issue Nov 23, 2013
Closed
@subimage
Copy link

+1 this sucks.

Specifically this won't work because you must include the foundation.js in the BODY tag. With turbolinks JS has to be included in HEAD, as the body gets wiped on each request — as noted in Issue #3643

@DanielKehoe DanielKehoe mentioned this issue Nov 23, 2013
Closed
@fny
Copy link
Contributor

fny commented Nov 24, 2013

There's a pretty simple fix: /pull/3668

You just need to (re)move FastClick or wrap Foundation in a closure and load when the DOM is ready.

I've written a more detailed explanation in a comment of a related issue.

@seantimm
Copy link
Contributor

Thanks for the assist, @fny! I've attached a pull request to #3643 as an alternative to #3668 which still uses FastClick but waits to hook it up until document.ready. I'll close this issue in favor of #3643.

@Kbutler Kbutler mentioned this issue Dec 3, 2013
Closed
@brodock
Copy link

brodock commented Jan 31, 2014

What solved for me was to include "jquery.turbolinks" and bind the initialization to the jquery document ready

@brodock brodock mentioned this issue Jan 31, 2014
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@seantimm @subimage @brodock @fny @DanielKehoe