title: UJS does not work for my inline editing solution in Rails 6.1.0
body: <p>I am trying to do inline editing which is not responding to the Ajax JQuery solution. However, if I remove <code>remote: true</code> from the view and make it respond to HTML, it edits and updates the record perfectly well. The Ajax JQuery solution for Delete/Destroy works well. I don’t know what I am missing. My code is listed below. I am using Rails 6.1.0, Bootstrap 4.</p>
  <p><strong>Controller</strong></p>
  <pre><code># frozen_string_literal: true
  
  class MerchantsController &lt; 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
  </code></pre>
  <p><strong>index.html.slim</strong></p>
  <pre><code>table.table.table-bordered.table-hover
      thead
        tr[style=&quot;background-color: #f1f8ff;&quot;]
          th
            | Name
          th
            | Description
          th
            | Email
          th
            | Status
          th
            | Transaction Sum
          th[colspan=&quot;2&quot;]
            | Functions
      tbody
        = render @merchants #This renders _merchant.html.slim below
  </code></pre>
  <p><strong>_merchant.html.slim</strong></p>
  <pre><code>- 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
        |  &lt;div id=&quot;edit-merchant&quot;&gt;
        = 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'
  </code></pre>
  <p><strong>_form.html.slim</strong></p>
  <pre><code>= 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'
  </code></pre>
  <p><strong>development log when I hit on edit button with remote set to true on the view template</strong></p>
  <pre><code>Started GET &quot;/merchants/22/edit&quot; for 127.0.0.1 at 2020-12-25 18:04:29 +0100
  Processing by MerchantsController#edit as JS
    Parameters: {&quot;id&quot;=&gt;&quot;22&quot;}
    Merchant Load (3.1ms)  SELECT &quot;merchants&quot;.* FROM &quot;merchants&quot; WHERE &quot;merchants&quot;.&quot;id&quot; = $1 LIMIT $2  [[&quot;id&quot;, 22], [&quot;LIMIT&quot;, 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)
  </code></pre>
  <p><strong>edit.js.slim</strong></p>
  <pre><code>| $('#edit-merchant a').hide().parent().append(&quot;
  = j render 'form', merchant: @merchant
  | &quot;) $('#edit-merchant form').hide().parent().append(&quot;
  = j render 'form', merchant: @merchant
  | &quot;)
  </code></pre>
  <p><strong>browser console (upon hitting in edit button)</strong></p>
  <pre><code>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__
          &lt;anonymous&gt;
          &lt;anonymous&gt;
      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__
          &lt;anonymous&gt;
          &lt;anonymous&gt;
  </code></pre>
  <p><strong>browser source code</strong></p>
  <p><a href="https://i.stack.imgur.com/IEfir.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IEfir.png" alt="enter image description here" /></a></p>