How to render a modal after failed update in Rails 5.2? - ruby-on-rails

Question

I use a modal window to edit a schedule from the schedules index. Each schedule provides a link to the edit method:
<%= link_to edit_scheduler_production_schedule_path(schedule),
title: t('.Edit'),
data: { toggle: "modal", target: "#childModal" },
class: "mat-icon-button mat-button-base mat-secondary" do %>
<span class="fa fa-edit"></span>
<% end %>
The edit method from ProductionSchedulesController is quite simple:
# GET /production_schedules/1/edit
def edit
render layout: false
end
So is the edit.html.erb file:
<% provide :childModalTitle do %>
<%= t('.Edit') %>
<% end %>
<%= render 'form' %>
And the edit form is quite light too:
<%= form_with model: [namespace, #production_job, #production_schedule], html: {id: "edit_form"} do |f| %>
<div class="modal-header">
<h5 class="modal-title" id="editScheduleModalLabel">
<%= t('scheduler.production_schedules.edit.Edit') %>
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<%= render partial: "shared/error_list", locals: { errors: #production_schedule.errors } %>
<section class="tabbable" id="schedule_information">
---
</section>
</div>
<div class="modal-footer">
<button type="button" class="mat-stroked-button mat-button-base" data-dismiss="modal">
<%= t('Cancel') %>
</button>
<button class="mat-flat-button mat-button-base mat-primary">
<%= t('Submit') %>
</button>
</div>
<% end %>
The update method is the place where I get frustrated:
# PATCH/PUT /production_schedules/1 or /production_schedules/1.json
def update
#production_job = ProductionJob.find(#production_schedule.production_job_id)
Rails.logger.interactions.info "Schedule update - id: #{#production_schedule.id},
code: #{#production_schedule.code},
mode: #{#production_schedule.mode.code}"
if #production_schedule.mode.code == 'TEST' or #production_schedule.mode.code == 'MESSAGE'
#production_schedule.next_run = nil
end
respond_to do |format|
if #production_schedule.update(production_schedule_params)
json_parameters_serialization(#production_schedule)
#production_schedule.update_attribute(:status_id, statuses.find { |x| x["code"] == "READY" }.id || 0)
format.html { redirect_to scheduler_production_job_path(#production_job), notice: "Production schedule was successfully updated." }
format.json { render :show, status: :ok, location: #production_schedule }
else
#production_schedule.update_attribute(:status_id, statuses.find { |x| x["code"] == "INACTIVE" }.id || 0)
format.html { render :edit, status: :unprocessable_entity }
format.json { render json: #production_schedule.errors, status: :unprocessable_entity }
end
end
end
If the update fails, edit view is rendered, but not in a modal.
How can I re-render this form in a modal when the update method rejects the update?
Thanks a lot!

Answer 1

In Rails 6.0 and 5.2, all forms using form_with implement remote: true by default. These forms will submit data using an XHR (Ajax) request. So, you need to respond to the request in the same format.
Update modal body of edit_form (Wrapping error messages in div)
<div class="modal-body">
<div id="errorList">
<%= render partial: "shared/error_list", locals: { errors: #production_schedule.errors } %>
</div>
</div>
Add update.js.erb
<% if (!#production_schedule.errors.present?) %>
window.location.reload(); # To refresh the page.
<% else %> # To render error messages in modal when update failed.
$("#errorList").html('<%= escape_javascript( render(partial: "shared/error_list", locals: { errors: #production_schedule.errors) ) %>');
<% end %>