Initializing Foundation on Rails-7 Turbo Frames not working inside turbo-frames

[chmich]

Description

Rails-7 has launched the hotwired/turbo. see Handbook well explained on Hotrails

normally i initialize foundation with a code piece like this

$(document).on('turbo:render', function() { //=> first trigger on click a turbo-link
    onPageLoad();
});
$(document).ready(function () {
    onPageLoad();
});

function onPageLoad() {
    $(document).foundation();
}

This works if no turbo-frame is applied because by default, if the turbo-drive finds no turbo-frame, it replaces the body which triggers the turbo:render (previous that was anything like turbolinks:load)

The Problem

But, if Turbo is applied like thought or explained on Hotrails there's not running any of the above showed triggers, so foundation is not initialized inside the Frame.

What i have tried

I tried something like $('#mainFrame').foundation(); and hoped that Foundation would be initialized within the Frame with the ID "mainFrame" but did'nt work.

What should happen?

It should be possible to initialize Foundation within a special element, like i've tried.

What happens instead?

So, all Elements that needs to be initialized don't working inside a turbo Frame without replace the whole page.

Possible Solution

Please, make something like $('#mainFrame').foundation(); working, thanks!

Best Regards, Christian

Test Case and/or Steps to Reproduce (for bugs)

I can upload you my rails project?

Test Case:

How to reproduce: 1. 2. 3.

Context

...

Your Environment

• Foundation version(s) used:
• Browser(s) name and version(s):
• Device, Operating System and version:
• Link to your project:

Checklist

• [ x] I have read and follow the CONTRIBUTING.md document.
• [ x] There are no other issues similar to this one.
• [x ] The issue title and template are correctly filled.

[weiserma]

+1 when using tabs in Foundation 6, the tab contents are not visible when selecting tab after a frame reload. Contents are there but cannot display unless I reload page or use "" on the console.

Tab Contents before turbo load: <div class="tabs-panel is-active" id="group-tabpanel1" role="tabpanel" aria-labelledby="group-tabpanel1-label"> ... </div>

Tab contents after turbo load: <div class="tabs-panel " id="group-tabpanel1"> ... </div>

I expect the tabs-panel not to be active after turbo load but still should be a way to-reinitialize foundation