Rails — AJAX form in Bootstrap modal with validations

Example: Add new(create only)competency in Questions form via ajax

Note: Individual CRUD screens will run as usual. No change in render ‘form’ line in new / edit screen. Add validations in model. Modal is general. Modal can be used for other objects too.

In any form with simple_form_for or form_with put below line

<%= simple_form_for([@survey, @question]) do |f| %>
    <%= f.association :competency %>
<%= link_to 'Add New Competency', new_competency_path, remote: true, 
      class: 'btn btn-primary mg-t-18', data: { toggle: 'modal', target: '#modal-object'} %>
<% end%>

In the end of form

<div class="modal fade" id="modal-object" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
        <h4 class="modal-title"></h4>
      </div><!-- .modal-header -->
<div class="modal-body">
        
      </div><!-- .modal-body -->
    </div>
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

In competencies_controller.rb add js format like below

# GET /competencies/new
  def new
    @competency = Competency.new
    respond_to do |format|
      format.html {}
      format.js {}
    end
  end

New file: app/views/competencies/new.js.erb

$("#modal-object .modal-title").html("Add Competency");
$("#modal-object .modal-body").html("<%= escape_javascript(render 'competencies/form', remote: true) %>");

In app/views/competencies/_form.html.erb. Just add remote variable & in form.

<% remote ||= false %>
<%= simple_form_for(@competency, remote: remote) do |f| %>
<%= f.error_notification %>
<%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>
<div class="form-inputs">
  <%= f.input :name %>
  <%= f.input :description %>
</div>
<div class="form-actions">
  <%= f.button :submit, class: 'btn btn-primary' %>
</div>
<% end %>

In competencies_controller.rb

def create
    @competency = Competency.new(competency_params)
respond_to do |format|
      if @competency.save
        format.html { redirect_to @competency, notice: 'Competency was successfully created.' }
        format.json { render :show, status: :created, location: @competency }
        format.js
      else
        format.html { render :new }
        format.json { render json: @competency.errors, status: :unprocessable_entity }
        format.js { render :new }
      end
    end
  end

New file: app/views/competencies/create.js.erb

<% if @competency.errors.blank? %>
  alert('Successfully Created Competency ');
  // Hide the modal
  $('#modal-object').modal('hide');
  // add the newly created address to the list of options
  $("#question_competency_id").append(new Option("<%= @competency.name %>", "<%= @competency.id %>", true, true))
<% else %>
  // dont hide let it show the errors in the UI
<% end %>

Reference:

https://gist.github.com/johnmeehan/571d9462187c553bd986ac8470d7cc26

https://ericlondon.com/2014/03/13/rails-4-submit-modal-form-via-ajax-and-render-js-response-as-table-row.html