如何在Rails 5.2更新失败后渲染模态?

Question

我使用一个模态窗口来编辑日程表索引中的日程表。每个时间表提供一个链接编辑方法:

<%= 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 %>

编辑方法from ProductionSchedulesController非常简单:

# GET /production_schedules/1/edit
def edit
render layout: false
end

edit.html.erb文件:

<% provide :childModalTitle do %>
<%= t('.Edit') %>
<% end %>
<%= render 'form' %>

和编辑表单也很轻:

<%= 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">&times;</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 %>

更新方法是让我感到沮丧的地方:

# 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

如果更新失败，则呈现编辑视图，但不在模态中.

如何在模态中重新呈现此表单当更新方法拒绝更新时?

非常感谢!

Answer 1

在Rails 6.0和5.2中，所有使用form_with的表单都默认实现了remote: true。这些表单将使用XHR (Ajax)请求提交数据。因此，您需要以相同的格式响应请求。

更新edit_form模态主体(在div中包装错误信息)

<div class="modal-body">
<div id="errorList">
<%= render partial: "shared/error_list", locals: { errors: @production_schedule.errors } %>
</div>
</div>

添加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 %>