JQuery 不显示视图上的验证

Question

我无法弄清楚我在 edit.js.slim 文件中做错了什么。当必填字段为空时，它不显示验证。

控制器

# frozen_string_literal: true

class MerchantsController < ApplicationController
  include ControllerHelpers::StrongParameters

  def index
    @merchants = Merchant.all.load
  end

  def edit
    merchant
  end

  def update
    merchant

    respond_to do |format|
      if @merchant.update(update_params)
        format.js { redirect_to merchants_path, notice: 'Merchant was successfully updated.' }
        format.json { render :show, status: :ok, location: @merchant }
      else
        format.js { render :edit }
        format.json { render json: @merchant.errors, status: :unprocessable_entity }
      end
    end
  end

  private

  def merchant
    @merchant ||= Merchant.find(params[:id])
  end

  def update_params
    params.require(:merchant).permit(permitted_merchant_update_attributes)
  end
end

edit.js.slim # 这不会在表单上显示验证错误，即使我点击 700 次

| $('.divTable.blueTable').bind('ajax:success', function () { $(this).hide().parent().append("
= j render 'inline_edit_form', merchant: @merchant
| "); })

_inline_edit_form.html.slim

= simple_form_for @merchant, id: dom_id(@merchant, 'inline_edit_form'), remote: true do |f|
  = f.error_notification
  = f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present?

  .divTable.blueTable
    .divTableHeading
      .divTableRow
        .divTableHead
          | Name
        .divTableHead
          | Description
        .divTableHead
          | Email
        .divTableHead
          | Status
        .divTableHead[colspan="2"]
          | Actions
    .divTableBody
      .divTableCell
        = f.input :name, label: false
      .divTableCell
        = f.input :description, label: false
      .divTableCell
        = f.input :email, label: false
      .divTableCell
        = f.input :status, label: false
      .divTableCell
        = f.button :submit, class: 'btn btn-primary btn-block btn-sm'

update.js.slim

| $('.refresh').bind('ajax:success', function () { $(this).hide().parent(); })

页面来源

所以在尝试解决它时，我在edit.js.slim 中提出了另一个解决方案，它显示了验证，但是当我第二次单击更新按钮时，它重定向到响应 HTML 的 marchant_path，而不是保留在表单上并显示验证违规。

| $('.divTable.blueTable').replaceWith('
= j render 'inline_edit_form'
| '); 

注意：我使用的是 Rails 6.1.0

Answer 1

根据我在浏览器页面源中的内容，edit.js.slim 是问题所在。这是我想出的：

index.html.slim

.container
  = flash_messages_for(@merchant)

  h2.title-format[id="merchant-title"]
    = t('merchant_page.table_heading.title')
  .divTable.blueTable
    .divTableHeading
      .divTableRow
        .divTableHead
          | Name
        .divTableHead
          | Description
        .divTableHead
          | Email
        .divTableHead
          | Status
        .divTableHead
          | Transaction Sum
        .divTableHead[colspan="2"]
          | Actions
    .divTableBody
      = render @merchants

我的浏览器页面源中有什么

_inline_edit_form.html.slim

= simple_form_for @merchant, remote: true do |f|
  .container
    h2.title-format
      = t('edit_page.edit_page_heading.edit')

  = f.error_notification
  = f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present?

  .divTable.blueTable
    .divTableHeading
      .divTableRow
        .divTableHead
          | Name
        .divTableHead
          | Description
        .divTableHead
          | Email
        .divTableHead
          | Status
        .divTableHead
          | Actions

    .divTableBody
      .divTableCell
        = f.input :name, label: false
      .divTableCell
        = f.input :description, label: false
      .divTableCell
        = f.input :email, label: false
      .divTableCell
        = f.input :status, label: false
      .divTableCell
        = f.button :submit, class: 'btn btn-primary btn-block btn-sm'

edit.js.slim

所以这就是我在我的edit.js.slim 文件中提出的使它正常工作的内容。

| $('.divTable.blueTable').hide().parent().prepend('
= j render 'inline_edit_form', merchant: @merchant
| ');

| $('form#edit_merchant_
= @merchant.id
| ').hide().parent().append("
= j render 'inline_edit_form', merchant: @merchant
| ");

| $("h2#merchant-title").remove(".title-format");