Search code examples
javascriptruby-on-railszurb-foundation-5

Foundation 5 JS not working in Rails app

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:

tooltip pic

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:

foundation JS includes

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

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?

Solution

  • 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.