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)

edit.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>

исходный код браузера

Я чувствую, что есть ошибка с Webpack. Поведение не просто регулярное. Это работает в Rails 6.0.0 и не работает в Rails 6.1.0.

Afolabi Olaoluwa 26.12.2020 14:40
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
0
1
260
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

По-видимому, код edit.js.slim не отвечает на выбор элементов, которые он должен выбрать. Мне пришлось переписать это с помощью Ajax, и это то, что я придумал, чтобы это работало. Хотя я изменил элемент таблицы html на свою собственную пользовательскую таблицу div, но она также работает с элементами таблицы html.

edit.js.slim

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

Итак, я выбираю классы HTML, где у меня есть divTable и blueTable, и заменяю их своей встроенной формой редактирования, которая отлично работает. Я надеюсь, что это поможет кому-то. Проверьте ниже исходные элементы моей страницы браузера, в любом случае, кто-то хочет развивать это дальше.

То, что я написал в вопросе, - это то, что я использовал для одного из моих проектов Rails 6.0.0 с Bootstrap 4, и там все работало без проблем. К сожалению, в Rails 6.1.0 этого нет.

Другие вопросы по теме