Ask A Question


You’re not receiving notifications from this thread.

Turboframes not replacing when placed in another partial

Barry Allen asked in Rails

I am trying to create a modal or a drawer which allows me to edit a form.

When I place the turbo_frame_tag in the same file like so. The form shows up properly when I click the link.


<%= turbo_frame_tag 'drawer' %>
<div class="card">
    <% for person in @people %>
        <td><%= %></td>
        <td><%= link_to 'Edit', '##' %></td>
    <% end %>

  <%= link_to 'New Person', new_admin_person_path, class: 'btn', data: { turbo_frame: "drawer", action: 'click->modal#open' } %>


  <%= turbo_frame_tag "drawer" do %>
    <%= simple_form_for [:admin, @person] do |f| %>
      <%= f.input :first_name %>
      <%= f.input :last_name %>
      <%= f.submit 'Save', class: 'btn' %>
    <% end %>
  <% end %>

However when I place it in the drawer or in the modal partial. The form does not display.


<div class="admin__overlay" data-action="click->modal#close"></div>
<div class="admin__drawer">
  <%= turbo_frame_tag "drawer" %>

The output of the HTML has the src url, the network request is made with no errors. But the turboframe is empty.

HTML Output

<turbo-frame id="drawer" reloadable="" src="http://localhost:3000/admin/people/new"></turbo-frame>

Any ideas here?


no ideas about it.


It looks like you need to replace the drawer code in your index.html.erb with something like

render "admin/shared/drawer"

and replace the contents of the drawer partial in your example with the drawer turbo frame code from your first code block.

This will place an empty drawer turbo-frame in your document, which will get populated with whatever you send it (in this case the new admin user form). I assume that it will also get assigned a CSS class to open/close via your Stimulus controller.

Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 83,603+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.