Barry Allen

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?

Hey everyone! I am working on a page builder. So the preview is in an iframe.

I am trying to make it so when I click the edit icon on a section in the iframe it displays that form in a sidebar in the parent frame.

Can this be accomplished with Hotwire or am I thinking about this the wrong way?