Hotwire Issue: Link Inside Turbo Frame

When you click a link inside a Turbo Frame (e.g., a modal) and it doesn’t seem to do anything, you might encounter the following error in your console:

Uncaught (in promise) Error: The response (200) did not contain the expected <turbo-frame> and will be ignored. To perform a full page visit instead, set turbo-visit-control to reload.

This error occurs because the response does not include the expected <turbo-frame> element, causing the navigation to be ignored.

Solution

To fix this issue, you can set the turbo_frame attribute to _top. This ensures that the navigation will target the top-level frame, effectively performing a full page visit.

You can achieve this by adding the following attribute to your link:

data: { turbo_frame: '_top' }

Alternatively, you can use the following syntax:

data-turbo-frame="_top"

Example

Here’s an example of how to apply this fix to a link inside a Turbo Frame:

<turbo-frame id="modal">
  <a href="/some-path" data-turbo-frame="_top">Click me</a>
</turbo-frame>

Reference

Turbo Handbook - Targeting Navigation Into or Out of a Frame