Barry Allen

Joined

1,900 Experience
18 Lessons Completed
0 Questions Solved

Activity

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?

Posted in Hotwire and iframes?

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?

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.