jquery - UJS 不适用于我在 Rails 6.1.0 中的内联编辑解决方案

问题描述

我正在尝试进行不响应 Ajax JQuery 解决方案的内联编辑。但是，如果我remote: true从视图中删除并使其响应 HTML，它会很好地编辑和更新记录。删除/销毁的 Ajax JQuery 解决方案运行良好。我不知道我错过了什么。我的代码在下面列出。我正在使用 Rails 6.1.0，Bootstrap 4。

控制器

# frozen_string_literal: true

class MerchantsController < ApplicationController
  include ControllerHelpers::StrongParameters

  def index
    @merchants = Merchant.all.load
  end

  def new; 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

  def destroy
    merchant
    @merchant.destroy
    respond_to do |format|
      format.js { redirect_to merchants_path, notice: 'Merchant was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

  private

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

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

index.html.slim

table.table.table-bordered.table-hover
    thead
      tr[style="background-color: #f1f8ff;"]
        th
          | Name
        th
          | Description
        th
          | Email
        th
          | Status
        th
          | Transaction Sum
        th[colspan="2"]
          | Functions
    tbody
      = render @merchants #This renders _merchant.html.slim below

_merchant.html.slim

- present(merchant) do |merchant|
  tr#remove-row.refresh
    td
      = merchant.name
    td
      = merchant.description
    td
      = merchant.email
    td
      = merchant.status
    td
      = merchant.total_transaction_sum
    td
      |  <div id="edit-merchant">
      = link_to t('merchant_page.button_labels.edit'), edit_merchant_path(merchant), remote: true, class: 'btn btn-primary btn-sm'
    td
      = link_to t('merchant_page.button_labels.delete'), merchant, method: :delete, data: { confirm: t('merchant_page.messages.delete'), remote: true }, class: 'delete btn btn-danger btn-sm'

_form.html.slim

= simple_form_for @merchant, remote: true do |f|
  = f.error_notification
  = f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present?

  .form-inputs
    = f.input :name
  .form-inputs
    = f.input :description
  .form-inputs
    = f.input :email
  .form-inputs
    = f.input :status
  .form-actions
    = f.button :submit, class: 'btn btn-primary btn-block btn-lg'

当我在视图模板上点击远程设置为 true 的编辑按钮时的开发日志

Started GET "/merchants/22/edit" for 127.0.0.1 at 2020-12-25 18:04:29 +0100
Processing by MerchantsController#edit as JS
  Parameters: {"id"=>"22"}
  Merchant Load (3.1ms)  SELECT "merchants".* FROM "merchants" WHERE "merchants"."id" = $1 LIMIT $2  [["id", 22], ["LIMIT", 1]]
  ↳ app/controllers/merchants_controller.rb:63:in `merchant'
  Rendering merchants/edit.js.slim
  Rendered merchants/_form.html.slim (Duration: 34.6ms | Allocations: 9456)
  Rendered merchants/_form.html.slim (Duration: 28.4ms | Allocations: 9060)
  Rendered merchants/edit.js.slim (Duration: 64.0ms | Allocations: 18921)
Completed 200 OK in 99ms (Views: 66.3ms | ActiveRecord: 14.2ms | Allocations: 24445)

编辑.js.slim

| $('#edit-merchant a').hide().parent().append("
= j render 'form', merchant: @merchant
| ") $('#edit-merchant form').hide().parent().append("
= j render 'form', merchant: @merchant
| ")

浏览器控制台（点击编辑按钮）

Uncaught SyntaxError: unexpected token: identifier
    processResponse rails-ujs.js:283
    node_modules application-729c39a0883e65f714cb.js:1570
    onreadystatechange rails-ujs.js:264
    createXHR rails-ujs.js:262
    node_modules application-729c39a0883e65f714cb.js:1568
    node_modules application-729c39a0883e65f714cb.js:2026
    node_modules application-729c39a0883e65f714cb.js:1546
    node_modules application-729c39a0883e65f714cb.js:1538
    node_modules application-729c39a0883e65f714cb.js:2137
    js application.js:6
    Webpack 3
        __webpack_require__
        <anonymous>
        <anonymous>
    processResponse rails-ujs.js:283
    xhr rails-ujs.js:196
    onreadystatechange rails-ujs.js:264
    (Async: EventHandlerNonNull)
    createXHR rails-ujs.js:262
    ajax rails-ujs.js:194
    handleRemote rails-ujs.js:652
    delegate rails-ujs.js:172
    (Async: EventListener.handleEvent)
    delegate rails-ujs.js:164
    start rails-ujs.js:763
    js application.js:6
    Webpack 3
        __webpack_require__
        <anonymous>
        <anonymous>

浏览器源代码

标签： jqueryruby-on-railsrubyajax

显然，edit.js.slim代码不会响应选择它应该选择的元素。我不得不使用 Ajax 重写它，这就是我想出的让它工作的方法。虽然，我将 html 表格元素更改为我自己的自定义 div 表格，但它也适用于 html 表格元素。

编辑.js.slim

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

所以，我正在选择我拥有的 HTML 类，divTable并blueTable用我的内联编辑表单替换它们，它工作正常。我确实希望对某人有所帮助。在下面查看我的浏览器页面源元素，无论如何，任何人都想进一步开发它。

我在问题中所写的是我用 Bootstrap 4 用于我的 Rails 6.0.0 项目之一，它在那里运行良好，没有任何问题。不幸的是，它不适用于 Rails 6.1.0。

jquery - UJS 不适用于我在 Rails 6.1.0 中的内联编辑解决方案

问题描述

解决方案

推荐阅读