Menu icon Foundation
Foundation 5 Topbar "Menu" not responding on Rails4

//= require jquery
//= require jquery_ujs
//= require jquery-fileupload/basic
//= require jquery-fileupload/vendor/tmpl
//= require jquery.turbolinks
//= require underscore
//= require gmaps/google
//= require foundation
//= require_tree .
$(function() {
  $(document).foundation();
});
            

I installed the 'foundation-rails' gem in my Rails4 application earlier today. Everything seems to be working fine except the "Menu" button that appears when I downsize the screen size. I click the menu button but it is unresponsive.

I have spent most of the day trying to fix this issue to no avail. Any help would be greatly appreciated!
Here are how my files look:

Here is my application.js

application.js

//= require jquery
//= require jquery_ujs
//= require jquery-fileupload/basic
//= require jquery-fileupload/vendor/tmpl
//= require jquery.turbolinks
//= require underscore
//= require gmaps/google
//= require foundation
//= require_tree .
$(function() {
  $(document).foundation();
});

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= content_for?(:title) ? yield(:title) : "Group S Rails Project" %></title>
    <meta name="description" content="<%= content_for?(:description) ? yield(:description) : "Group S Rails Project" %>">
    <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
    <%# Modernizr is required for Zurb Foundation %>
    <%= javascript_include_tag "vendor/modernizr" %>
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    <header>
      <%= render 'layouts/navigation' %>
    </header>
    <main role="main">
       <%= render 'layouts/messages' %>
       <%= yield %>
    </main>
  </body>
</html>       

_navigation.html.erb

<%# navigation styled for Zurb Foundation 5 %>
<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name"><%= link_to 'Point of Interest', root_path %></li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>
  <div class="top-bar-section">
    <ul>
      <%= render 'layouts/navigation_links' %>
    </ul>
  </div>
</nav>  

Console error shown:

Uncaught TypeError: Cannot call method 'querySelectorAll' of undefined foundation.js?body=1:54
S foundation.js?body=1:54
Foundation.libs.topbar.toggle foundation.topbar.js?body=1:85
(anonymous function) foundation.topbar.js?body=1:140
jQuery.event.dispatch jquery.js?body=1:4625
elemData.handle jquery.js?body=1:4293

foundation5railsrails4rubytopbarnavigationmenu error

//= require jquery
//= require jquery_ujs
//= require jquery-fileupload/basic
//= require jquery-fileupload/vendor/tmpl
//= require jquery.turbolinks
//= require underscore
//= require gmaps/google
//= require foundation
//= require_tree .
$(function() {
  $(document).foundation();
});
            

I installed the 'foundation-rails' gem in my Rails4 application earlier today. Everything seems to be working fine except the "Menu" button that appears when I downsize the screen size. I click the menu button but it is unresponsive.

I have spent most of the day trying to fix this issue to no avail. Any help would be greatly appreciated!
Here are how my files look:

Here is my application.js

application.js

//= require jquery
//= require jquery_ujs
//= require jquery-fileupload/basic
//= require jquery-fileupload/vendor/tmpl
//= require jquery.turbolinks
//= require underscore
//= require gmaps/google
//= require foundation
//= require_tree .
$(function() {
  $(document).foundation();
});

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= content_for?(:title) ? yield(:title) : "Group S Rails Project" %></title>
    <meta name="description" content="<%= content_for?(:description) ? yield(:description) : "Group S Rails Project" %>">
    <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
    <%# Modernizr is required for Zurb Foundation %>
    <%= javascript_include_tag "vendor/modernizr" %>
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    <header>
      <%= render 'layouts/navigation' %>
    </header>
    <main role="main">
       <%= render 'layouts/messages' %>
       <%= yield %>
    </main>
  </body>
</html>       

_navigation.html.erb

<%# navigation styled for Zurb Foundation 5 %>
<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name"><%= link_to 'Point of Interest', root_path %></li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>
  <div class="top-bar-section">
    <ul>
      <%= render 'layouts/navigation_links' %>
    </ul>
  </div>
</nav>  

Console error shown:

Uncaught TypeError: Cannot call method 'querySelectorAll' of undefined foundation.js?body=1:54
S foundation.js?body=1:54
Foundation.libs.topbar.toggle foundation.topbar.js?body=1:85
(anonymous function) foundation.topbar.js?body=1:140
jQuery.event.dispatch jquery.js?body=1:4625
elemData.handle jquery.js?body=1:4293

This post has been closed. No new replies can be added.

Damien Adermann over 5 years ago

I have this same issue. I have on idea what is causing it and after lots frustration I changed foundation_rails to version '5.0.3.1' and it worked!

I also disabled turbolinks trying to get it to work but I haven't added that back yet to so it they need to be disabled.

Gian Marco Prazzoli over 5 years ago

Got the same behaviour, seems to me that the main problem is a conflict with rails 4 turbolinks. I tried to disable them in a single page and the resized menu does indeed work.

EDIT: maybe I'm onto something: I monkey-patched the

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

to:

 window.onload = function() {
        $(document).foundation();
};

And it seems that the menu is now working even on pages with turbolinks. Checking.

Samuel Stacey over 5 years ago

I removed turbolinks and also did
HTML
<ul class="right">
<%= render 'layouts/navigation' %>
</ul>

This fixed this particular issue for me. I am using the most recent version of foundaiton_rails also.

Erik Anderson over 5 years ago

Having the same issue on Ruby 2.1/Rails 4.0.2 and foundation-rails. I disabled turbolinks and changed the application.js like Gian suggested and it works now.

I had to add this to remove some ugly shading effects as well:
CSS
.top-bar.expanded .toggle-topbar a span {
-webkit-box-shadow: none;
box-shadow: none;
}

sandect over 5 years ago

change a.left-off-canvas-toggle href from '#' to 'javascript:;' will work

Ben Knowles about 5 years ago

The solution is to disable turbolinks on the menu. This can be done without completely disabling them by changing:

<nav class="top-bar" data-topbar role="navigation">

to:

<nav class="top-bar" data-topbar data-no-turbolink role="navigation">

Richard Washington over 4 years ago

Hi All,

For anyone looking for a good solution to this which does not involve turning off the very useful turbolinks please see below:

You will need to add

gem 'jquery-turbolinks'

to your Gem file then do the usual bundle install

Following this change your javascript manifest file (application.js) to run in the following order:

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require foundation
//= require_tree .
$(function(){ $(document).foundation({});
// any other code etc
//= require turbolinks

This will ensure turbolinks runs AFTER everything else (especially foundation in this case).

More information can be found at https://github.com/kossnocorp/jquery.turbolinks.

BOOM it all now works.