How to wrap my Ruby on Rails partials in a Tabbed Boostrap Signup Form

Question

I have used MTI (Multiple Table Inheritance) structures to create different SignUp Forms for my users such that I have 3 different partials called _company.html.erb, _individual.html.erb, and _admin.html.erb, since they have different details to be used for signing up into the app am working on. However, I want to render each partial such that I could achieve a TabbedForm based on Bootstrap.

For more clarity, I like to achieve something like this picture below:

Here is what I have done:

SignUp View

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <div class="panel panel-login">
        <div class="panel-heading">
          <div class="row">
            <div class="col-xs-6">
              <a href="#" class="active" id="login-form-link">Login</a>
            </div>
            <div class="col-xs-6">
              <a href="#" id="register-form-link">Register</a>
            </div>
          </div>
          <hr>
        </div>
        <div class="panel-body">
          <div class="row">
            <div class="col-lg-12">
              <%=    render 'companies/form' %>
              <%=    render 'individuals/form' %>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

One of the Partials rendered in the Signup View above _form.html.erb

<%= simple_form_for(Company.new) do |f| %>
  <%= f.error_notification %>

  <div class="form-inputs">
    <%= f.input :company_name, label: "Company Name", placeholder: 'Company Name' %>
    <%= f.input :company_url, label: "Company URL", placeholder: 'Company URL' %>
    <%= f.input :country, label: "Country", placeholder: 'Country' %>
    <%= f.input :contact_person, label: "Contact Person", placeholder: 'Contact Person' %>
    <%= f.input :phone_number, label: "Phone Number", placeholder: 'Phone Number' %>
    <%= f.input :email, required: true, autofocus: true %>
    <%= f.input :password, required: true, hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length) %>
    <%= f.input :password_confirmation, required: true %>
  </div>

  <div class="form-actions">
    <%= f.button :submit %>
  </div>
<% end %>

How do I wrap my Partials in Bootstrap Tabs such that I can have a TabbedForm like the provided picture above?

Answer 1

try this on your sign up view file:

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <div class="panel panel-login">
        <div class="panel-heading">
          <div class="row">
            <div class="col-xs-6">
              <a href="#" class="active" id="login-form-link">Login</a>
            </div>
            <div class="col-xs-6">
              <a href="#" id="register-form-link">Register</a>
            </div>
          </div>
          <hr>
        </div>
        <div class="panel-body">
          <div class="row">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
              <li role="presentation" class="active">
                <a href="#individual" aria-controls="individual" role="tab" data-toggle="tab">Individual</a>
              </li>
              <li role="presentation">
                <a href="#company" aria-controls="company" role="tab" data-toggle="tab">Company</a>
              </li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
              <div role="tabpanel" class="tab-pane active" id="individual">
                <%= render 'individuals/form' %>
              </div>
              <div role="tabpanel" class="tab-pane" id="company">
                <%= render 'companies/form' %>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">
  $('#myTabs a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
  });  
</script>

NOTE: you need to have bootstrap javascript included in your view file for this to work.