Unable to break out of frame with data-turbo-frame

1

Hi all,

I have a column on my messages index page dedicated to show a list of all messages a user has, and another column on the same page which should display the selected message.

Unfortunately when I click a message, the placeholder text “Select a conversation” disappears, but the message doesn’t actually render within the frame that I set with data-turbo-frame. When I check console logs, I get:

turbo.es2017-esm.js:5198 Response has no matching <turbo-frame id="show_message"> element

<div class="col-md-2 border-end h-100 overflow-scroll gx-0 example p-2">
  <% @messages.each do |message| %>
    <%= turbo_frame_tag dom_id(message) do %>
      <%= link_to message.id, profile_message_path(message.profile, message), data: { turbo_frame: "show_message" } %>
    <% end %>
  <% end %>
</div>
<div class="col col-md-9 col-lg-8">
  <%= turbo_frame_tag "show_message" do %>
    <div class="h-100 w-100 d-flex justify-content-center align-items-center fs-4 fw-400">Select a conversation</div>
  <% end %>
</div>

Any pointers? :man_shrugging:

2

This means that the response from controller does not have a show_message frame. Have you checked that the response contains a matching turbo-frame with the same id?.

3

Strange, I had my show partial wrapped in a show_message turbo-frame before and it wasn’t working. Try again and now it’s working. Could have just been a typo.

Thanks for the comment, have a great day! :grinning:

4

Exactly. I wish there was a standard for storing these strings in a helper method to avoid stupid typos. I encounter them all the time.

What i’m thinking is that having a CONSTANT in the resource helper that would store they names. For example, in your case you would have something like this

# app/helpers/messages_helper.rb

module MessagesHelper
   FRAMES= {
      show: "show_message"
      # other frame names
    }
end

Then in your code you would do

  <%= turbo_frame_tag MessagesHelper::FRAMES[:show] do %>
    <div class="h-100 w-100 d-flex justify-content-center align-items-center fs-4 fw-400">Select a conversation</div>
  <% end %>
1 Like