How to stay on the same page when I click on sidebar links in Rails

Question

I have 3 models where employee has_many insurances and employee has_many educations and both insurances and educations belongs_to employee.

The entire flow is working fine.

Now I've got a requirement where when I click on employees -> edit, I have to show a sidebar under the edit form with insurances and educations link. And when I click on insurances/ educations, it should render in the same edit page.

employees/edit.html.erb

<h1>
  <%= @employee.full_name %>
</h1>
<div class="tabpanel">
  <div class="tab-content">
    <div class="tab-pane active" id="home" role="tabpanel">
      <%= render 'form' %>
    </div>
  </div>
</div>
<%= render 'layouts/sidebar' %>

layouts/_sidebar.html.erb

<div class="sidebar">
  <ul class="nav">
    <li>
      <%= link_to image_tag("Insurances.png")+"Insurances",  employee_insurances_path(@employee) %>
    </li>
    <li>
      <%= link_to image_tag("Education.png")+"Education", employee_educations_path(@employee) %>
    </li>
  </ul>
</div>

My insurances controller

class InsurancesController < ApplicationController
  before_action :set_insurance, only: [:show, :edit, :update, :destroy]

  respond_to :html

  def index
    @employee = Employee.find(params[:employee_id])
     @insurances = @employee.insurances.all
    respond_with(@insurances)
  end

  def show
    @employee = Employee.find(params[:employee_id])
    respond_with(@insurance)
  end

  def new
    @employee = Employee.find(params[:employee_id])
    @insurance = @employee.insurances.build
  end

  def edit
      @employee = Employee.find(params[:employee_id])
  end

  def create
    @employee = Employee.find(params[:employee_id])
    @insurance = @employee.insurances.create(insurance_params)
    redirect_to employee_path(@employee)  
  end

  def update    
  @employee = Employee.find(params[:employee_id])
    @insurance.update(insurance_params)
    redirect_to employee_path(@employee)  
  end

  def destroy
        @employee = Employee.find(params[:employee_id])
    @insurance.destroy
    redirect_to employee_path(@employee)  
  end

  private
    def set_insurance
      @insurance = Insurance.find(params[:id])
    end

    def insurance_params
      params.require(:insurance).permit(:name_of_dependent, :relationship,:policy_numbere)
    end
end

Any idea how to render the same page when I click on sidebar links?

Answer 1

What I understood is that you are having two edit forms one for insurance and one for education. Or you may have a single form. What you need to do is when the user clicks on the links in the sidebar send a AJAX request to the controller. Create a partial of the form. And in the success of the AJAX request append the form on the page wherever you want like this:

$('#container').append('<%= escape_javascript(render :partial => "form", :locals => {:employee => employee}) %>');

The locals are optional. And the #container is a section/div or any element in the DOM of your existing page which you can rename to anything. And in the controller in the action which you send the request you need to write like this:

respond_to do |format|
  format.js
end

This will search for a file of the name of you action with the extension of js.eb. For example you send it to edit action then the file name should be edit.js.erb in the views folder. And in the js.erb write the code of appending the partial.

Hope this helps.