DEV Community

Mike Rogers ✈️
Mike Rogers ✈️

Posted on

Inline Editing With turbo_frame_tag (hotwire-rails)

One of my favourite Single Page Application (SPA) tricks is allowing the user to edit something (like a comment) without having to leave the page they're on, a little bit like on Reddit.

Using the turbo_frame_tag helper from the hotwire-rails gem, I was able to achieve this in about 4 lines of code! I also didn't have to touch any JavaScript or change my existing controller code.

The code

<!-- app/views/comments/_comment.html.erb -->
<%= turbo_frame_tag dom_id(comment) do %>
    <%= comment.body %>

      <%= link_to 'Edit', [:edit,, comment] %> | <%= l comment.updated_at, format: :long %>
<% end %>
Enter fullscreen mode Exit fullscreen mode
<!-- app/views/comments/edit.html.erb -->
<h1>Editing Comment</h1>

<%= turbo_frame_tag dom_id(@comment) do %>
  <%= render 'form', comment: @comment %>
<% end %>

<%= link_to 'Show', url_for([, @comment]) %> |
<%= link_to 'Back', url_for([]) %>
Enter fullscreen mode Exit fullscreen mode

How does the tag work?

The turbo_frame_tag helper method will wrap your block of code in a <turbo-frame id="comment_1"> tag (which is like a div, but magic!).

When a link within that tag is clicked, Turbo will perform an AJAX type request to the requested page looking for a <turbo-frame> tag with a matching ID, if it finds one, it'll replace the content with the new content.

Oldest comments (3)

ericchapman profile image
Eric The Coder

Great video, thanks.

hungmi profile image

Thank you for this great video.
Just a reminder, we don't need to use dom_id after this commit

gogamar profile image

Hey Mike, great post, such a simple solution that highly optimizes any crud operation in rails!