Hotwire Discussion

Navigating into and out of frames...?

Hello friends,

I’m trying to understand what is said here in the documentation:

https://turbo.hotwire.dev/handbook/frames#targeting-navigation-into-or-out-of-a-frame

Or it can drive another named frame by setting the target to the ID of that frame.

I’ve tried playing around by changing the target to different things but with no luck. Was wondering if you knew the intended functionality of this and could give a simple psudeo-code hello world example?

Any pointers would be much appreciated. Thank you!

Here is a screenshot:

I’m guessing at an example here…

You have something you want lazy-loaded into a page and use a frame (<turbo-frame src="/somewhere">). But you want the links and/or forms in that frame to drive something else on the page.

One possible example from HEY (where they don’t do this!). When you look at an email, there’s a bar, loaded in a frame, at the bottom where you can reply, set aside etc.

When you press “Reply now”, that bar gets replaced with a space for you to write.

But you don’t just have to click the button in the bar to get to the reply composer. Each email in a thread has its own menu where you can choose to reply (helpful if you have a long email thread but want to reply to a specific email that isn’t the last email in the thread):

When you press reply, the exact same thing will happen as if you pressed reply in the bar at the bottom: the bar will get replaced with a space for you to write your reply.

Suppose that menu in the email was loaded in a frame (it isn’t, but just imagine it was). Sure, you could add a data-turbo-frame attribute to the reply button. But if you wanted every other button or link to drive the same frame, that’d just be a hassle. So target="bar" is a neat way of doing that instead.

I’m sure there’s a specific example in HEY of this being used, I just haven’t found it. But did that help?

@dan I’m sure there’s a specific example in HEY of this being used, I just haven’t found it. But did that help?

When I click on the emails_path link, I would expect the contents of the set_aside_tray to be replaced by what is contained in the email#show.html.erb — but this is not happening. Am I doing the right thing and understanding correctly?

Any pointers would be appreciated.