0

I have a complex multi-level dropdown menu and I want to load the content only when user click on the button. The content is lazy loaded.

<div class="dropleft">
  <button type="button" class="btn btn-clean btn-icon btn-sm btn-icon-md" data-toggle="dropdown">
     Open multi-level dropdown
  </button>
        
  <div class="dropdown-menu">    
      <%=turbo_frame_tag "actions", src: controller_path(), loading: 'lazy' do %>
         Loading...
      <% end %>
  </div>   
</div>

controller

def actions
    render layout: false
end

actions.html.erb

<%=turbo_frame_tag "actions" do %>
 <li>item 1</li>
 <li>item 1</li>
<% end %

now the problem is that the rendered tag mess up with the existing code and broke the boostrap dropdown.

<div class="dropleft show">
   <button type="button" class="btn btn-clean btn-icon btn-sm btn-icon-md" data-toggle="dropdown">
      Open multi-level dropdown
   </button>
        
   <ul class="dropdown-menu show" style="position: absolute; transform: translate3d(-158px, 0px, 0px); top: 0px; left: 0px; will-change: transform;" x-placement="left-start">    
     <turbo-frame loading="lazy" id="actions" src="http://localhost:3000/actions">
         <li>Item 1</li>
        <li>Item 2</li>
      </turbo-frame> <!-- This tag broke the multi-level dropdown -->
    </ul>   
 </div>

How can I say to render the template from server and then remove the turbo frame tag?

sparkle
  • 7,530
  • 22
  • 69
  • 131
  • I think you can't. There is the same problem with tables. Your turbo frame has to contain the whole `ul` to me. – Maxence Sep 21 '22 at 09:56
  • Any ideas how I can refactor this? The goal is to lazy load usign turbo frame the dropdown menu after the user clicked on the dropdown button. The dropdown content is rendered from another controller – sparkle Sep 21 '22 at 15:41

0 Answers0