Hotwire Discussion

Loading two frames from a single Application Visit event

I have a basic two-pane content page:

<div>
  <turbo-frame id="toc">...</div>
  <turbo-frame id="content"><a href="/wiki/some-topic">Some Topic</a></div>
</div>

/wiki/:topic returns:

<turbo-frame id="toc">
  Some Topic's TOC (a bunch of anchor hrefs with data-turbo="false")
</div>
<turbo-frame id="content">
    Some Topic's contents, which includes more links like the one above.
</div>

But with it set up like this, two things I want aren’t happening:

  1. Only turbo-frame#content is getting its contents replaced.
  2. The address bar isn’t updating to /wiki/some-topic.

For 1., should multiple frames be updating if I return multiple turbo-frame values, even if it’s not from the frame that invoked the request? If not, how do I go about making one frame’s navigation events update another frame’s contents? Do I need to use Stimulus 2.0?

For 2., how do I go about debugging why it’s not updating the url? I can see the src attribute on the turbo-frame#content does have the right url.

If I can resolve these two things, then I can ditch an entire SPA!

Thanks!

Navigation in a frame doesn’t cause the page’s URL to change, and only the frame that issues the request will be updated in response.

Looks like I want something this library isn’t designed to provide. Thanks, Sam.

You have an example where a frame can change an external frame in the section " Frame with overwritten navigation targets" here:

but it loks like two frames can not be updated from the same response. I have opened an issue in case you are interested in the topic:

Just to let you know, in the repo issue you have the solution. You can response 2 streams in a http reponse and both parts of the DOM will be replaced.

I think it can be achieved by using a turbo streams, unless you really wants to use turbo-frames