Turbo Frames, Layouts and Modals

1

I have a page that I want to render in a turbo frame. That page has partial that defines a modal. I have some Rails comments to see what particular portions of the modal are rendered to make sure that code is being hit on the server side. When I load the page, I can see that development.log has entries matching my modal erb comments… But if I look at the elements on my page, the modal is not there.

Why would that be? In my shares_controller.rb I have this under the ‘new’ action:

    if request.headers["Turbo-Frame"]
      # The request is coming from a Turbo Frame
      respond_to do |format|
        format.html { render layout: false } # Render without the application layout
      end
    else
      # The request is a regular HTML request
      respond_to do |format|
        format.html # Render with the application layout
      end
    end

Though even if I render with the application layout the problem is the same.

My ‘new’ page looks like this:

<turbo-frame id="content-turbo-frame">
...
          <%= render "my_modal" %>
...
</turbo-frame>

‘my_modal.html.erb’ looks like this:

<% content_for :modals do %>
  <% Rails.logger.info "JOHNO: Rendering turbo version of new modal" %>
  <div class="modal my-modal" id="my_modal" tabindex="-1" data-controller="share_link" >
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <% Rails.logger.info "JOHNO: Rendering turbo version of my modal" %>
        <div class="modal-header t-title--large">
          My Modal
        </div>
        <div class="modal-body">
...
        </div>
        <div class="modal-buttons">
...
        </div>
      </div>
    </div>
  </div>
<% end %>

If I inspect the page, there are no elements with the id ‘my_modal’ or the class ‘my-modal’. The previous version of this page, not loaded inside a turbo-frame works fine. Any help would be greatly appreciated.

2

Hello there,

Can you share the part of the page where you want to render this turbo-frame content?

3

Thanks for getting back to me vkalach! The problem was that, when I display turbo-frame, I load it without the layout. And the layout was where I was ‘yeilding’ to the modal content. So basically, it never loaded the modal. I have a new in-house way of doing modals. We basically created a stimulus controller for modals and I tell that controller what I want in the modal and it does the rest.

Thanks again!