Turbolinks and Foundation are not playing nice

[salex]

Started a new rails application the other day (4.2.6) and bundled up my normal gems. I’ve been using Foundation for a few years but not much more than the basic stuff( grid, top_bar, a few accordions and modals, etc).

Of course when I tried to bring in (copy) some old stuff, it didn’t work. Thats when I discovered that 6 was loaded. Had issues with stuff calling 5.x gem, even though 6 was loaded. Uninstalled 5 and started from scratch and got 6 up.

I then tried to put in a top menu (copied old code and ran into all kinds of problems). Starting from scratch again, I got the top menu example from the Doc’s page version (http://foundation.zurb.com/sites/docs/top-bar.html). Looked good. Figured out how to do a little styling and ok - bring up the home page with no live links. Look good, added a ‘Home’ link (href = ‘/‘) and things blew up. The dropdown menu was no longer a drop down but fully expanded. This happened any time I went to a new page from a link.

Found another version somewhere on Zurb but it still failed.

Disabled turbo links, which I’ve had problems with, but most fixed with gem ‘jquery-turbolinks'.

Opps!

After writing last sentence, I found out that disabled gem ‘jquery-turbolinks’, and not turbolinks, Forgot it in application.js. After disabling turbo links, the drop-down worked fine.

Seems the problem is with turbolinks, which I’m not sure what it does except cause more problems. Problems (speeding up) that they think I had, and they fixed!

In a nut shell, TurboLinks breaks top-bar if it has a drop_down menu. Probably accordions and other things that caching breaks.

[weedySeaDragon]

👍
Experienced exactly the same with both 6.2.0 and 6.1.2.0 (ruby 2.2.2 p95)

[victorsosa]

just install this gem 'jquery-turbolinks' it will fix the issue

[weedySeaDragon]

Thanks for the info @victorsosa ! That looks like a great solution.

[sdhull]

Yeah F6 & rails 5 turbolinks not playing nice. I tried to get it working with sticky topbar and that in particular was trouble. The jquery-turbolinks gem didn't fix it for me, sadly.

[sdhull]

For now I've decided to bail on Foundation Sticky and use Waypoints.js instead, which works fine with turbolinks.

[ryankc33]

Foundation 6 works flawless for me now. Turns out the Turbolinks > 5 API had changed, and you need to do the following:

1. Install the jquery-turbolinks gem
2. Add the following in your application.js

$(document).on('turbolinks:load', function() {
  $(function(){ $(document).foundation(); });
});

The key here is turbolinks:load

[sdhull]

@ryankc33 yes, that is what I have in my application.js file. It works (so far) for the other Foundation js that needs to reinit (tooltip & dropdown, for example work ok). But sticky does not.

[anykeyh]

@sdhull
Same here with sticky.

cf. http://foundation.zurb.com/forum/posts/39089-zf62-how-to-get-sticky-to-work-with-turbolinks
A good work-around:

$(function() {

 $(document).foundation();

 // FIX.

 $(window).trigger('load.zf.sticky'); 

});

[andreas-sotnik]

Magellan plugin is also not working correctly after Turbolinks visits page (navigation is working, but active menu items aren't).

I've found the following workaround:

$(window).on('scroll', function() {
    if ($('[data-magellan]').data('zfPlugin')) {
        $('[data-magellan]').trigger('resizeme.zf.trigger');
    }
});

It's definitely not the best and cleanest fix, but it's working for me. Maybe somebody knows a better solution?

[mycargus]

@ryankc33 's fix did the trick for me. I also had to install jquery-rails.

Please oh please fix this, Foundation ☹️ I love your product but your README has zero mention of the need for this workaround when using Rails 5 + Foundation 6, and the foundation:install command doesn't automatically take care of it either. I wasted three hours on this. 😞

[salex]

It's been almost a year since I posted the original thread. I tried a bunch of the fixes but finally gave up and ditched TurboLinks. Didn't seem to do anything for me except cause me problems. Think all the problems come from competing javascript tools. There is probably finger pointing going on and we can't solve it as users of those tools.

[Elyasin]

I cannot find a fix for this neither, except maybe a non elegant solution, which I really don't want to apply.

I finally decided to look out for alternatives to Foundation. Foundation is a great product, but requires also great effort in some cases. I hope to find something more lightweight and less complex.

[ibarrajo]

@Elyasin You are so right!

I'm still resisting to rebuild the whole project in bootstrap.

Then again, I hope I've cleared most of the Foundation learning curve by now, I was getting tired of all of my projects looking alike.

Look into @ryankc33 answer, it did the fix for me.

[mejibyte]

I solved it by having this in app/assets/javascripts/appplication.js:

document.addEventListener("turbolinks:load", function() {
  jQuery(function(){
    $(document).foundation();
  });
});

I didn't install the jquery-turbolinks gem. I am not using Sticky though but it sounds like the fix from @anykeyh would work.

[SiriusDely]

some combination of solutions here do the work for me:

$(document).on('turbolinks:load', function() {
  $(function(){
    $(document).foundation();
    $(window).trigger('load.zf.sticky');
  });
});

Thanks!