How to call stimulus function in turbo_stream response?

1

Hey,
I have stimulus function.

reset() {
 ...
}

And I also have turbo_stream response

  = turbo_stream.append("bulk-action-modal") do
    = content_tag :div, "", data: {action: "turbo:load->bulk-action#reset"}

How to call this function on dom connection?

Right now the reset method is not called. I am just wondering which event should I trigger to call this method.

I could create another stimulus controller and then put the code into connect method, but It would be more code to write. I would like to avoid this.

2

I added reset target and then use resetTargetConected

  resetTargetConnected(element) {
    this.reset();
    element.remove();
  }

  = turbo_stream.append("bulk-action-modal") do
    = content_tag :div, "", data: {bulk_action_target: 'reset'}
1 Like
3

How does your controller know to call resetTargetConnected() when it sees that data in an appended object?

When I was doing something similar, the only way I could get it to work was to have the controller save itself in the global window, then added a streamactions js to call it:

StreamActions.check_convo = function () {
  const text = this.getAttribute( "text" );
  if ( typeof cc != "undefined" ) cc.check_convo( text );
}
4

It works because stimulus automatically observes the DOM for changes within the controller’s scope. When a new element is appended and it has a data-[controller]-target, stimulus calls the corresponding targetConnected() callback.

So in the case of OP, when the div is appended by the turbo_stream, stimulus will automatically trigger resetTargetConnected() which then calls reset and remove.

Useful feature baked into stimulus for free which often gets missed!

5

Nice, thanks. I’ve been struggling with sticking with the HTML-over-the-wire aspect of hotwire but then needing to also have more complex things happen (like adding boldface to a user’s name when there’s a new message from them, etc).

As with all coding really, it looks elegant when getting started but then once you have all the “fixes” there to make it actually work it’s easy to have it be a mess.