Rails 4 Foundation Top-Bar Menu not working
Question
I am using Rails 4.1.7, Foundation 5.5 and tried Foundation 5.4.3.2
I went to the Foundation Page and tried the example for the top-bar navigation
Can be found here and is the exact code used in _header.html.erb.
Everything is working, except for the menu item that shows up when decreasing the size of the browser (tried on chrome and firefox). When I click the item nothing happens.
My understanding was that the example code should reproduce a navigation bar where menu is clickable and shows the dropdown with having to add any code?
I created a new rails app just to test this out.
_header.html.erb partial:
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1><a href="#">My Site</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"><a href="#">Right Button Active</a></li>
<li class="has-dropdown">
<a href="#">Right Button Dropdown</a>
<ul class="dropdown">
<li><a href="#">First link in dropdown</a></li>
<li class="active"><a href="#">Active link in dropdown</a></li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li><a href="#">Left Nav Button</a></li>
</ul>
</section>
</nav>
Gemfile:
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.7'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
#gem 'sass-rails', '~> 4.0.3'
gem 'sass-rails', github: 'rails/sass-rails', branch: 'master'
gem 'sass', '~> 3.3.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
gem 'foundation-rails', '~> 5.4.3.1'
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring', group: :development
application.html.erb file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= content_for?(:title) ? yield(:title) : "foundation-rails" %></title>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "vendor/modernizr" %>
<%= javascript_include_tag "application" 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body data-no-turbolink>
<%= render 'layouts/header' %>
<div class="row">
<div class="small-8 columns"><%= yield %></div>
<div class="small-4 columns"><p>Test</p></div>
</div>
</body>
</html>
I tried looking for the answer online but did not find anything recent discussion and all the solutions I found did not work for me (disabling turbolinks, changing the way the foundation library is called..)
Any help is greatly appreciated! Jean
4 answers
solution1
4 2015-03-22 18:20:25
I ran into this issue with the turbolinks gem and found this solution for rails 4.2.0 and foundation 5.5.1.
In your gemfile: gem 'jquery-turbolinks'
On the command line: bundle install
then in your application.js: //= require jquery //= require jquery.turbolinks //= require jquery_ujs //= require foundation //= require_tree . $(function(){ $(document).foundation()}); //= require turbolinks //= require jquery //= require jquery.turbolinks //= require jquery_ujs //= require foundation //= require_tree . $(function(){ $(document).foundation()}); //= require turbolinks //= require jquery //= require jquery.turbolinks //= require jquery_ujs //= require foundation //= require_tree . $(function(){ $(document).foundation()}); //= require turbolinks Restart server.
This fixed all the issues with the foundation javascripts not loading by making sure turbolinks runs last using the jquery-turbolinks gem.
solution2
0 2014-12-24 00:35:52
Do you have the following in your js?
//= require foundation
$(document).foundation();
In fact, the foundation gem you are using has a generator you can/should run:
rails g foundation:install
solution3
0 2015-03-23 13:24:12
This really sounds like a javacript/turbolinks issue.
I've explained how to disable turbo-links already, so I linked to an earlier response.
Create a branch and see if the following solves the problem. If it does, turbo-links is the issue.
solution4
0 2015-10-16 23:23:51
I believe the problem is more widespread than just the top bar JavaScript, in fact, it involved all of Foundation's JavaScript on my machine. After trying many solutions without much success, I finally just started removing code that looked troublesome.
After running rails g foundation:install and allowing the command to overwrite the main application ERB file.
In your application.html.erb, change this...
<%= javascript_include_tag "application" 'data-turbolinks-track' => true %>
to this...
<%= javascript_include_tag "application" %>
This single line of code fixed my foundation-rails gem JS, I hope this helps anyone who comes here in the future.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.