Get event target after frame loads - Turbo Rails

derschiw 0
Viewed 35

I have some turbo frame forms in my page that should fire some javascript after they are loaded into the document. Therefore I'm using the turbo:frame-load event listener. To access the <turbo-frame> element I'd like to use the event's target, as mentioned in the documentation (https://turbo.hotwired.dev/reference/events):

turbo:frame-load fires when element is navigated and finishes loading (fires after turbo:frame-render). The specific element is the event target.

Here my code:

document.documentElement.addEventListener('turbo:frame-load', function (e) {
  console.log(e.target);
});

However this returns not the <turbo-frame> element, but the <html> element instead. Does anyone know how to get the <turbo-frame> instead?

turbo hotwire-rails ruby-on-rails
1 Answers

You should attach your listener to the turbo frame you are monitoring :

document.querySelector("turbo-frame#turbo-frame-id").addEventListener('turbo:frame-load', function (e) {
  console.log(e.target);
});
user52140
Related