Getting a Turbo Frame Error of "Content Missing"

Question

I'm trying to use turbo_frame_tag in my Rails application to manage some tasks. I created a scaffold for my tasks.

I wrapped the page I want to use inside of a turbo frame tag as below:

<%= turbo_frame_tag "modal" do %>

      <h1>New task</h1>
      <%= render "form", task: @task %>
      <br>
      <div>
        <%# <%= link_to "Back to tasks", tasks_path %> %>
        <%= link_to "Cancel", "#", data: {
          controller: "modals",
          action: "modals#close"
        }, class: "cancel-button" %>
      </div>

<% end %>

enter image description here

In my home page index.html.erb file I added data to my Add button with the same tag:

<%= link_to "Add", new_task_path, data: { turbo_frame: "modal" }, class: "btn btn-secondary", remote: true %>

The modal is working correctly. It is opened when I click the Add button on my home page. When I try to submit my action to create a new task, I see on my terminal 200 Response and the new task is added to my database.

But (also) I get the "Content Missing" text information on my home page. The page isn't reloaded. In the developer browser I get this error:

turbo.es2017-esm.js:3650 Uncaught (in promise) Error: The response (200) did not contain the expected \<turbo-frame id="modal"\> and will be ignored. To perform a full page visit instead, set turbo-visit-control to reload.
at c.delegateConstructor.throwFrameMissingError (turbo.es2017-esm.js:3650:15)
at c.delegateConstructor.handleFrameMissingFromResponse (turbo.es2017-esm.js:3646:14)
at c.delegateConstructor.loadFrameResponse (turbo.es2017-esm.js:3567:18)
at async c.delegateConstructor.loadResponse (turbo.es2017-esm.js:3441:34)

enter image description here

I have just started learning Ruby on Rails and everything is new for me. I would be grateful for any help and information if anyone had such a problem and how to deal with it.

Answer 1

This behavior is introduced and documented in this PR. Note that the hotwire documentation has been updated with a recommended solution.

You can specify that a page should redirect instead of rendering the Content Missing error by adding a [turbo visit control tag] (https://turbo.hotwired.dev/reference/attributes#meta-tags).

To make it easier, you can utilize a turbo helper method.

<!-- show.html.erb -->

<meta name="turbo-visit-control" content="reload">

<!-- or -->

<%= turbo_page_requires_reload %>

Alternatively, you can explicitly add a data: {turbo_frame: "_top"} to specify that a link should break out of the turbo_frame.