0

I have a Rails 8/Hotwire app where I'm trying to edit comments using Turbo Frames. When using lazy loading with src, clicking the edit button fails with a Turbo Frame error, but works fine with inline content.

Working Version (without src):

within the user show view, i render a list of comments:

<%# users/show.html.erb %>
<%= turbo_frame_tag dom_id(@user.id, "comments") do %>
  <%= render @user.comments %>
<% end %>

<%# target frame to render the edit view %>
<%= turbo_frame_tag dom_id(skill, :edit) %>

with the partial i have an edit link:

<%# commmets/_comments.html.erb %>
<%= turbo_frame_tag comment do %>
  <%= link_to edit_user_comment_path(comment.user, comment), 
      data: { turbo_frame: dom_id(comment, :edit) } do %>
    edit comment
  <% end %>
  <%= comment.body %>
<% end %>

which shows the edit view:

<%# commmets/edit.html.erb %>
<%= turbo_frame_tag dom_id(@comment, :edit) do %>
  SOME CONTENT
<% end %>

Not Working Version (with src):

if i instead use the src attribute:

<%# users/show.html.erb %>
<%= turbo_frame_tag dom_id(@user.id, "comments"), src: polymorphic_url([@user, :comments]) %>
<%# comments/index.html.erb %>
<%= turbo_frame_tag dom_id(@user, "comments") do %>
  <% if @comments.empty? %>
    <p class="text-sm text-gray-500 italic">No comments added yet.</p>
  <% else %>
    <%= render @comments.ordered  %>
  <% end %>
<% end %>

When clicking the edit within the comment partial, I get this error:

Uncaught (in promise) Error: The response (200) did not contain the expected <turbo-frame id="comment_155e1b8a-7476-41fb-bbc1-812899c438d6">

The only difference is removing the src attribute and rendering the content inline. Why does the lazy loading version fail to find the correct Turbo Frame? How can I keep lazy loading while making the edit functionality work?

Additional Context:

  • Using Rails 8.0.0.beta1
  • Using Hotwire/Turbo Rails
  • Trying to open edit content in a drawer component

Any help understanding why this behaves differently would be appreciated!

2
  • the only difference is lazy version is rendering comments/index template, non lazy version is only rendering comments/_comment partials. i'm not sure how the "working" version is working, you cannot target a frame that is not currently present on the page: data: { turbo_frame: dom_id(comment, :edit) }. Commented Nov 27, 2024 at 22:53
  • good point about the rendering, i checked this as well. i also extended the question with more details and i also have a <%= turbo_frame_tag dom_id(skill, :edit) %> on the users show view. Commented Nov 28, 2024 at 8:59

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.