Search code examples
ruby-on-railsrubyruby-on-rails-4activeadminformtastic

How to use tabs in an ActiveAdmin edit form rendered from an ERB partial


I had to change an ActiveAdmin edit form from that I've been using to an ERB partial due to several technical reasons.

The form is quite massive and I had to split it into tabs already. When attempting to add tabs by using <% tabs do %> in the ERB partial, the following error appears in the rails server output:

Completed 500 Internal Server Error in 209ms

ActionView::Template::Error (undefined method `tabs' for #<#<Class:0x007fb1827cdbf8>:0x007fb181b16d60>):
    1: <%= semantic_form_for [:admin, @consignment], builder: ActiveAdmin::FormBuilder, html: { enctype: 'multipart/form-data' } do |f| %>
    2:   <% f.semantic_errors *f.object.errors.keys %>
    3:   
    4:   <% tabs do %>
    5:   
    6:     <% tab 'Foo' do %>
    7:   
  app/views/admin/consignments/_form.erb:4:in `block in _app_views_admin_consignments__form_erb__783297827544755550_70200180247600'
  app/views/admin/consignments/_form.erb:1:in `_app_views_admin_consignments__form_erb__783297827544755550_70200180247600'

I understand that I might have to include a helper somewhere to have the tabs rendered, but I'm not sure about which one to use and where to include it.


Solution

  • I ended up entering the HTML manually, in the following way:

    <div class="tabs">
      <ul class="nav nav-tabs" role="tablist">
        <li><a href="#consignment-details">Consignment Details</a></li>
        <li><a href="#consignment-details">Trucks</a></li>
      </ul>
    
      <div class="tab-content">
    
        <div id="consignment-details">
        </div>
    
        <div id="containers">
        </div>
    
      </div>
    
    </div>