Ruby on Rails - Foundation - Tabs not working

I have spent over a week trying to get Foundation working in my Ruby on Rails project. I have tried every piece of sample code that I can find and nothing works:

image

Ruby 2.6.3
Rails 5.2.4
JavaScript 1.7
jQuery 1.12.4
jQuery-ui 1.12.1
Foundation Rails 6.6.1.0

<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#panel1">Tab 1</a></li>
  ...
<div class="tabs-content">
  <div class="content active" id="panel1"><p>this is panel 1</p></div>
  ...

First of all, I don’t even get tabs, I get bullets. This can happen I suppose if you’re not hooked up to the right stylesheet or whatever. Even so, when that happens, you should still be able to click on the links and have the panel contents change. Instead, all of the contents are listed out. I notice that nothing fires (no events) and I have no errors in my console. SO - what gives? How do I even begin to troubleshoot this? I am exhausted! Does Foundation not work with my release of Rails?

Thanks for any guidance,

Robert

Hi, not sure if you are referencing to Foundation Sites 5 or 6.

Your jQuery version looks at least very old.

Can you share a codepen with the html, css and js code that you use?

The current examples in the docs should work with Foundation Sites 6.

Thank you for getting back to me. Yes, I understand I am using an old version of jQuery. I can use a more modern version and there is no difference. Using codepen seems like a good idea, unfortunately, you just can’t use that for RoR. I am using foundation through rails-foundation - so that is not straight html, css, etc.

This morning, I decided to create a new app using the old “stack” - old version of rails with an old version of foundation (5) - just to make sure that my understanding of how to set everything up is correct. Sure enough - it works fine. One thing that surprises me is that - if I don’t hook in the foundation style sheet, the tabs stuff doesn’t work. It doesn’t throw an error. It just dies. That means that foundation code (.js) is looking for specific things in its stylesheet and if it doesn’t find it - it just croaks. So this all works fine (old version).

I repeated all of the same steps I used (above) to install foundation on my modern RoR stack. And it simply doesn’t work. The stylesheet kicks in - so I see those changes but, the code doesn’t run at all. It’s like it’s completely dead. No error is thrown - so you do not know what’s going on. One difference is - it is trying to use Ruby Sass (I see it installed .scss files). So right now, I’m wondering if it doesn’t have its stylesheets sorted or what.

Is there any, like diagnostic page, or anything that will tell you if foundation and its scripts are working at all ???

Thanks,

Robert

This is because it contains motion-ui which is required for many animated elements.

Otherwise many animationstart/animationend events would not be fired (we use listeners for these).

In general $(document).foundation() has to be run. Is this the case? window.Foundation should be available in the browser console.

A codepen just needs some html example, this is possible without Ruby and RoR (use the view-source:// URL).