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!
comments/indextemplate, non lazy version is only renderingcomments/_commentpartials. 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) }.<%= turbo_frame_tag dom_id(skill, :edit) %>on the users show view.