JS not invoked in Turbo-Frame

pgr · March 31, 2021, 6:11pm

Hello,

I was wondering, why tags, which were loaded in a turbo-frame arent evaluated.
It seems that the script elements are lost in activateElement(), when cloning the retrieved frame:
element = document.importNode(element, true);

I wanted to render a ReactOnRails component in the frame. The gem solved that using those script tags.

Did nobody encounter such an issue yet?

Or does anybody have an idea how I could work around this issue?

Thanks alot!

tleish · March 31, 2021, 11:05pm

Are you referring to <script> tags or all HTML tags?

If script tags, see: Evaluate script tags from turbo streams · Issue #186 · hotwired/turbo · GitHub

pgr · April 1, 2021, 6:40am

Hi, I’m referring script tags. Thanks for the issue. It seems to got accepted (regarding turbo-streams) and also refer to #192, which might solve especially my problem (for turbo-frame).

What chances do I have to speed the merge of PR up ?

tleish · April 1, 2021, 3:18pm

No idea, but you can try the gist referred to in the ticket if you can’t wait for it to be merged.

gist.github.com

https://gist.github.com/xtr3me/cf99f6673ebcca83f111abd41e9676bb

trigger_disconnect_on_turbo-before-cache.js

// I use Rails and my Stimulus controllers are available in application.controllers.
// This adds a listener that is triggered when the turbo:before-cache event is emitted
document.addEventListener('turbo:before-cache', function () {
  application.controllers.forEach(function (controller) {
    try {
      if (typeof controller.disconnect === 'function') {
        controller.disconnect()
      }
    } catch (_) {}
  })

This file has been truncated. show original

turbo_issue_186.html

<!-- wrap your script tags in an element that includes the workaround controller -->
<div data-controller='turbo-issue-186-workaround'>
  <script>console.warn('Executed by the workaround stimulus controller');</script>
</div>

<script>console.warn('Will not be executed...')</script>

turbo_issue_186_workaround_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
  connect() {
    // Could be replaced by requestAnimationFrame()
    setTimeout(() => {
      [...this.element.children].map(el => this.activateScript(el));
    }, 300);
  }

This file has been truncated. show original

Topic		Replies	Views
Javascript in turbo-frame response not executed anymore?	6	2021	March 18, 2021
JS <script> loaded within <turbo-frame id="x" src="/y"> runs locally, fails production	1	1150	March 8, 2021
Need help understanding how turbo works	6	947	September 25, 2024
DOM changes from backend in a turbo_frame_tag are not triggering value changes callbacks	9	1246	June 7, 2021
Turbo navigation event causes script tags to be duplicated to the body	0	46	August 19, 2024

JS not invoked in Turbo-Frame

Related topics