Foundation 5 JS not working in Rails app

Question

I am trying to get Foundation 5 javascript components (any of them) to work in a Rails 4.2.0 app, but nothing I have tried seems to work. I am using the foundation-rails gem, and have followed the documented steps to install it .

To test that Foundation JS works, I've inserted the basic HTML for a tooltip, explained here , to show a tooltip link:

<span data-tooltip aria-haspopup="true" class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>

On the page, the tooltip link is styled correctly, however, the tooltip function itself does not work and falls back to the system alt text, as shown below:

My first guess was that there is something wrong with the way I included the Foundation JS files, However, I have double-checked the source for pages in my app, and they all seem to be there:

I have also verified that $(document).foundation() is being included in the Rails app's application.js:

The JS components of Foundation still don't function, even if I place $(function(){ $(document).foundation(); }); in a script tag right before the element that it affects.

How can I debug this? Is there something I can run in the JS console to figure out what is going on?

Answer 1

It turns out I was able to fix this right after I applied the bounty! It seems the issue was somehow related to how Rails caches assets in development environments ( this article says a little bit about it).

Basically, I had recently upgraded Foundation 4 to Foundation 5, and I didn't realize it but the SCSS assets being served were still Foundation 4's assets, not those of Foundation 5. I accidentally figured this out when I restarted my computer and all of a sudden tooltips worked.

If anyone else has this issue, I would try wiping rails cache by running the command rake tmp:clear and seeing if that fixes it.

Answer 2

Yeah, you can add

config.serve_static_files = true

in your development.rb config file and make sure you don't precompile, this makes rails load the assets from the original location every time, which reflects changes that are made instantly.