All threads / Turboframes not replacing when placed in another partial
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?

Join the discussion

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

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

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

    logo Created with Sketch.

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

    © 2022 GoRails, LLC. All rights reserved.