Confused on "turbo:frame-render" and "turbo:frame-load" events

1

According to the docs

turbo:frame-render fires right after <turbo-frame> element renders its view.
turbo:frame-load fires when <turbo-frame> element is navigated and finishes loading (fires after turbo:frame-render).

I’m expecting these events to be dispatched after a form within a turbo-frame is submitted and the response is successful with the new contents, but they aren’t:

document.documentElement.addEventListener("turbo:frame-load", event => {
  console.debug("turbo:frame-load event:", event)
})
  • I’m using turbo v7.0.0 released yesterday
  • I’m positive the form is submitted via fetch, so turbo is working as expected here.
  • Not subscribing to a turbo-stream (i.e. no websocket)
  • The rails controller responds with a turbo stream response instead of a classic html response.

Is this the correct behavior? Or am I doing something wrong?

2

I get turbo:frame-render on form submissions that respond with a turbo-frame

Screenshot from 2021-09-27 08-27-16
Screenshot from 2021-09-27 08-27-16791×95 12.2 KB

I don’t see turbo:frame-load - isn’t that when a frame is loaded from having src though ?

it’s the frameLoaded call in the method below that raises the event -

  async loadSourceURL() {
    if (!this.settingSourceURL && this.enabled && this.isActive && (this.reloadable || this.sourceURL != this.currentURL)) {
      const previousURL = this.currentURL;
      this.currentURL = this.sourceURL;
      if (this.sourceURL) {
        try {
          this.element.loaded = this.visit(this.sourceURL);
          this.appearanceObserver.stop();
          await this.element.loaded;
          this.hasBeenLoaded = true;
          session.frameLoaded(this.element);
        } catch (error) {
          this.currentURL = previousURL;
          throw error;
        }
      }
    }
  }
1 Like
3

I’m returning a turbo-stream response from the server, but the turbo:frame-render isn’t being triggered… I wonder if including flash messages (having multiple turbo frames in the response) has something to do with it:

4

Well, if the server responds with an HTML response, it works.

If the server responds with a turbo stream, the event never gets triggered…

5

OK I think this is not implemented. If the server responds with a turbo-stream (not necessarily using a web socket), the “turbo:frame-render” never gets triggered - it just replaces/appends the received content, and does nothing else: turbo/stream_actions.ts at 157d423a6fb692625a49d5b260e410909a7e331e · hotwired/turbo · GitHub

I think I’ll fill an issue @ github

6

I found this other discussion: Event to know a `turbo-stream` has been rendered - #6 by sam

I guess I’ll go that way instead.