Ask A Question

Notifications

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.

admin/people/index.html.erb

<%= turbo_frame_tag 'drawer' %>
<div class="card">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Status</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
    <% for person in @people %>
      <tr>
        <td><%= person.name %></td>
        <td>TBD</td>
        <td><%= link_to 'Edit', '##' %></td>
      </tr>
    <% end %>
    </tbody>
  </table>

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

admin/people/_form.html.erb

  <%= 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.

admin/shared/_drawer.html.erb

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

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?

Reply

no ideas about it.

Reply

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.

Reply
Join the discussion
Create an account Log in

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

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

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