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.

Top comments (3)

hungmi profile image

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

ericchapman profile image
Eric The Coder

Great video, thanks.

gogamar profile image

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