Hotwire: advanced Turbo Frames
This course covers advanced Turbo Frames through the frames on one app's admin and notes pages. It shows several frames on a single page with dynamic ids, and why those ids must be unique. It explains leaving a frame for the whole page with _top, targeting a frame by name, and adding browser history with turbo_action. Forms follow the same targeting rules as links. The last lessons cover what Turbo does when a response lacks the expected frame, and how to read a frame-heavy page.
What you'll learn
- ✓Rendering several frames on one page with dynamic, unique ids
- ✓Leaving a frame for the whole page with the reserved _top target
- ✓Targeting a frame elsewhere on the page by its id
- ✓Adding or replacing a browser history entry with turbo_action advance or replace
- ✓Applying the same frame targeting rules to forms
- ✓How Turbo handles a response missing the expected frame
Many frames, one page
In the junior-level course "Hotwire: Turbo Drive & Frames", each frame example had one job on its page: the lesson editor's image section, the discussion thread. Nothing says a page can have only one. This app's admin course list has four independent frames on the same page, one per level, and each…
Read the full lesson free →Curriculum
7 lessonsMany frames, one page
Four frames on one page, each paginating itself through a per-level id, and what breaks when ids collide.
Breaking out with turbo-frame: _top
How the reserved _top target sends a link or form inside a frame to a full page.
Targeting a different frame by name
Naming any frame on the page by id, including a defensive self-target and a list updating an editor panel.
Frame-level navigation history
How turbo_action advance makes frame pagination push history entries, and how replace differs.
Forms follow the same rule
Forms use the same frame targeting as links, shown by a defensive _top on a search form.
The missing-frame response
What Turbo does when a response lacks the expected frame, and the two documented ways to opt out.
Putting it together: reading a frame-heavy page
Reading the admin course index as a summary of frame ids, _top breakouts, history and missing frames.