Foundation 5 Topbar not working consistently in rails 4

Question

I\'m using foundation 5 in my rails 4 app. The topbar menu works fine when I send a request. I can hover the items and nested items no problems. Then, I click on one of the

Answer 1

Foundation has known issues with Turbolinks, your issue may be due to that.

To troubleshoot that, you could disable Turbolinks and see if the top-bar still has issues.

Here's a simple guide: http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4 .

Beyond that, if you must have Turbolinks, and Turbolinks is the issue. You can try adding jquery turbolinks as seen here: https://github.com/kossnocorp/jquery.turbolinks .

If the problem continues to persist, the next step would be to check the order you're importing the javascript files (this matters with these Turbolinks / Foundation issues) and you may be satisfied that way. I do not have an exact order for you to put them in, but if you search for "Turbolinks Foundation" issues you will eventually stumble onto some solutions. This is not necessarily a certain solution, but it'll guide you in the right direction.

Update: Try this order for importing your javascript assets. And, to quote the source:

Its important to put all the Javascripts to be loaded inside the tag. The order of inclusion of jQuery is important – ensure you load jquery.turbolinks before turbolinks and after jquery. Include all your custom js between jquery-turbolinks.js and turbolinks.js in your application.js

// app/assets/javascript/application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs

//= require foundation
//= require jwplayer/jwplayer.js
//= require asset_videos

//= require turbolinks

Note: Look at Alex Aube's answer on this page for additional useful information.

Answer 2

Ok. To go along with what Ecnalyr explained. (Which he explained correctly, and I kind of misunderstood for a little bit). This worked for me:

I kept = javascript_include_tag "application" at the end of the body of application.html.erb

application.js is like this:

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require foundation
//= require_tree .

$(document).foundation();

//= require turbolinks

Answer 3

I recently experienced this issue.

Using jquery.turbolinks didn't fix it. Reordering the requires in the application.js didn't fix it.

Nothing mentioned so far here did the trick.

The solution I found was to move the foundation initializer from application.js to within the body. I just put it below my _nav partial.

<script>
  $(document).foundation();
</script> 

Answer 4

This works for turbolinks progressbar and foundation tabs, dropdown links, accordion

//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .

var ready;
ready = function() {
  $(document).foundation();
};
$(document).ready(ready);
$(document).on('page:load', ready);