turbo:frame-load in turbo_stream not triggering

[Nerian]

Hi,

I am trying to execute some common JS code whenever the contents of a turbo-frame are rendered. But I am having some issues when the turbo-frame is updated via turbo_stream. It seems like the turbo:frame-load event is not happening.

edit.html.slim

= turbo_frame_tag @academic_year do
        = render partial: 'details'

academic_years_controller.rb

def update
  ...
  respond_to do |format|
    format.turbo_stream      
  end
end

update.turbo_stream.erb

<%= turbo_stream.update(dom_id(@academic_year), partial: 'details') %>

$(document).on('turbo:frame-load',function() {
  console.log('turbo:frame-load');
})

I don't see the turbo:frame-load happening, despite the fact that the frame is correctly updated.

What am I misunderstanding? How can I execute code after a frame is updated via turbo_stream?

Thanks

[seanpdoyle]

Currently, a turbo:frame-load event is only dispatched after the frame's contents have been fetched from an HTTP response. The same is true for turbo:frame-render.

Having said that, I could see a case for dispatching a turbo:frame-render when a <turbo-frame> element connects to the document, and continuing to dispatch a turbo:frame-load whenever it retrieves its contents over HTTP.

Unfortunately, the current implementation and documentation for turbo:frame-render mentions that the detail.fetchResponse property references the HTTP response, which would not be present on an initial rendering of the element.

I'll open a Pull Request against hotwired/turbo to propose changing that.

In the meantime, you might want to declare a Stimulus controller, render [data-the-controller-target="frame"] on the <turbo-frame> element (the original and the one in the <turbo-stream> response), then declare a Target Connected Callback in that controller to have a hook for handling a newly connected Frame element.

[seanpdoyle]

I've opened hotwired/turbo#702 to explore the implications of dispatching turbo:frame-render whenever a Frame element is connected to the document.

[Nerian]

Amazing, thanks 🥳

[justinjdickow]

Just adding detail to the implementation mentioned.

If you have a stimulus controller that has the method you want to execute already attached to some view then your turbo stream can render the view with a local like

<%= turbo_stream.append "somethings" do %>
  <%= render @something_new, do_something: true  %>
<% end %>

when the view renders you can conditionally connect a new controller

<div id="somethings_<%= @something_new.id %>"  data-controller="the-existing-controller <%= local_assigns[:do_something] ? " the-new-controller" : "" %>"
...
</div>

And the new controller can call the existing controller's method

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    const existing_controller = this.application.getControllerForElementAndIdentifier(this.element, "the-existing-controller");
    existing_controller.doSomething();
  }
}