foundation / foundation/yeti

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

Open
#12,485 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
29.8k
Forks
5.4k
Avg merge
25m
Merged PRs (30d)
1

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the reported document-ready and turbo:render handlers, then inspect the #mainFrame initialization attempt in a minimal Rails 7 Turbo Frames example. Reproduce the failure with the supplied initialization code and determine whether Foundation initializes elements inserted inside the frame. Done means a reproducible test case and a verified initialization path for frame content without replacing the whole page.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, jquery, rails
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.