Listening for Turbo events not always working

1

Hey all,

I’m trying to get a basic proof-of-concept working with Turbo Frames. The eventual goal is to use javascript to focus on an input element once the frame is rendered.

What works:
The example below correctly fetches the turbo frame from the server and updates only the “random should change” element every time you click on the link. Amazing!

If the event listener listens for turbo:click or turbo:before-fetch-response, the console logs each click, as expected.

Problem:
I would expect to be able to listen for turbo:load, just like a click. However, when we set the listener to turbo:load, turbo:render, or even turbo:before-visit, it seems that those never bubble up.

I’m sure it’s something simple that I’m overlooking. Thanks in advance!

<!doctype html>
<html lang="en">
  <head>...</head>
  <body>
    <div class="container">
      <h1>Random (should not change): 206</h1>
      <turbo-frame id="random-change">
        <h2>Random (should change): 7025</h2>
        <p><a href="/core/turbo-test/" data-turbo-action="replace">Replace random number</a></p>
      </turbo-frame>
    </div>

    <script>
      document.addEventListener("turbo:load", function(e) {
        window.console.log("Action done.")
      })
    </script>
  </body>
</html>
3 Likes