Foundation 5 Topbar not working consistently in ra

2019-02-05 01:01发布

站内问答 / JavaScript
1351 4 4

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 items, which has a link_to method associated to it. Sometimes it gives the proper result where my menu still works perfectly, but other times the whole thing freezes. This also makes the back button of the mobile menu disappear. Once I send a new request through the refresh or url, the menu works again.

Rails doesn't see any problem in the log file. My menu works fine outside of rails. I wonder if maybe it has to do with my link_to tag_helpers or the way I have set up foundation in my app?

Here is a quick overview on how the JS is routed for foundation. (The config they suggest on their docs) views/layouts/application.html.erb:

<head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <%= stylesheet_link_tag    "application" %>
 <%= javascript_include_tag "vendor/modernizr" %>
</head>   
<body>     
  <%= javascript_include_tag "application" %>     
</body>

assets/application.js:

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

$(document).foundation();

Has anybody else encountered this problem? Any good solution other than not using foundation 5 out there?

Thanks Alex

4条回答
甜甜的少女心
2楼-- · 2019-02-05 01:22

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.

查看更多
0人赞 添加讨论(0) 举报
放我归山
3楼-- · 2019-02-05 01:24

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);
查看更多
0人赞 添加讨论(0) 举报
傲
4楼-- · 2019-02-05 01:33

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
查看更多
0人赞 添加讨论(0) 举报
趁早两清
5楼-- · 2019-02-05 01:49

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)