Foundation 5's accordion not working with Rails 4

Question

Foundation 5's accordion works great when I use it as per the documentation and open that page directly. However, if I click to another link on my site and then click to the page with the accordion, then the accordion doesn't expand when I click on the headings :(. I figured maybe it's the turbolinks JavaScript messing with Foundation's accordion. So we added this to the link to the page with the accordion:

<li data-no-turbolink><%= link_to 'My accordion page', accordion_page_path %></li>

Now it works better , but not perfect. If I go to my accordion page from another page, the accordion works. But then when I navigate away and click the back button on my browser, stops working :(.

This must be an extremely common problem as Foundation and Rails are very popular. Any way to get this to work?

Answer 1

Yes, turbolinks can cause many issues with RoR.

The reason turbolinks breaks your javascript is that document.ready events won't trigger properly. You need to do it on change instead.

Option 1. Revise all of the Javascript (Not easy or recommend)

var on_load = function() { 
}
$(document).ready(on_load)
$(window).bind('page:change', on_load)

Option 2. Use the Jquery-Turbolinks gem.

The jquery turbolinks gem is designed to get around this problem. However, you need to read the docs, and make sure to install it properly. (It's a tricky beast.)

Option 3. Remove Turbolinks

If it's causing you to much trouble, you can just remove it. Delete it from the gemfile, remove turbolinks-tracked: true from your assets in the application layout, and wave turbolinks goodbye. I will admit, I have done this several of times. :\\