Turbo Frame Navigation#
In Sure's UI, several pages embed content inside named Turbo frames. Links within those frames are intercepted by Turbo and their responses are injected back into the same frame — not into the full page. When a link's destination renders a full-page layout (no matching frame in the response), Turbo discards the response and shows a "Content missing" error.
The solution is data-turbo-frame="_top", which tells Turbo to perform a full-page navigation instead of a frame-local one. This mirrors how Hotwire's target="_top" works in iframes.
The Statements Tab Bug (Issue #2614)#
The account detail page renders its Statements tab inside a Turbo frame with ID statements_tab_account_<id> . Statement action links inside that frame — the filename link, the eye/view icon, the inbox link, and the unlink button — previously had no data-turbo-frame attribute .
When a user clicked any of these links, Turbo attempted to update the frame with the response from AccountStatementsController#show, which renders with the settings layout and contains no <turbo-frame id="statements_tab_account_<id>"> . Turbo logged:
The response (200) did not contain the expected
<turbo-frame id="statements_tab_account_<id>">and will be ignored.
The same statement links in Settings › Statement Vault worked correctly because they are not inside any Turbo frame, so Turbo performed a normal full-page visit.
This bug was reported in #2614 and fixed in PR #2657.
Fix: data-turbo-frame="_top"#
PR #2657 added data: { turbo_frame: "_top" } to all four statement interaction points in _statements.html.erb:
| Element | Location |
|---|---|
| Filename link | |
| Eye/view icon link | |
| Inbox/open statements link | |
Unlink button (form: { data: { turbo_frame: "_top" } }) |
For button_to (which renders a form), the attribute goes on the form rather than the button: form: { data: { turbo_frame: "_top" } }.
General Pattern#
Any link or form inside a named Turbo frame that navigates to a destination without a matching frame in its response must use data-turbo-frame="_top". This is the Hotwire-idiomatic escape hatch — see Turbo Frame documentation.
Common signals that this fix is needed:
- Turbo console error: "did not contain the expected
<turbo-frame id="…">" - A link inside a tabbed or drawer frame navigates to a page with a different layout (e.g.,
settingslayout vs. application layout) - The same link works fine when accessed outside of the frame context