Getting Inner Content of Turbo Frame

1

I want to start using turbo frames throughout my web app but after reading the docs I’m not quite sure if it works the way I’m intending. I know a turbo frame with a specific id gets replaced with the turbo frame on the linked page with the same id and I can make it work that way but I actually want it to grab just a child element within that turbo frame rather than the whole turbo frame (and its contents) to use to replace the original with.

So I guess my question boils down to is it possible to scope to just an element inside a turbo frame by placing the id on that child element rather than on the turbo frame element itself?

I know I can just wrap the element I want in another turbo frame but I’m looking for a solution that doesn’t change the structure of our HTML. Or is there some other turbo attribute I can use that I’m missing?

2

I’d wrap the turbo-frame in a custom Stimulus controller that would have a method e.g. extractExpectedComponent that would be fired when the turbo frame emits the turbo:frame-render event. I’d also store the selector for finding the expected component as a value attribute.

<turbo_frame
 data-controller="untouchable-frame"
 data-untouchable-frame-expected-component-selector="#expected_component"
 data-action="turbo:frame-render->untouchable-frame#extractExpectedComponent"
>

// controllers/untouchable-frame_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = {
    expectedComponentSelector: { type: String }
  }
  extractExpectedComponent(event) {
    const frame = event.target
    if (this.expectedComponentSelectorValue === undefined) { return }
    const componentsFound = frame.querySelectorAll(this.expectedComponentSelectorValue)

    // do something with componentsFound
  }
}
3

Thanks. I just decided to come up with a server based solution using if/then logic that outputs what I need. It works in this particular situation but I will bookmark your solution for future reference as it makes sense.

4

This is very simple by responding to the http request with a turbo-stream response instead of a turbo-frame.