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 81,149+ developers who get early access to new tutorials, screencasts, articles, and more.

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

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

    © 2024 GoRails, LLC. All rights reserved.