Rails 使用 Ajax 编辑操作未更新且无法正常工作

Question

我正在尝试做两件事:

使用 Ajax 当用户点击编辑时呈现编辑表单 link/button
然后在编辑后点击更新 link/button，隐藏表单。

...但不幸的是，它并没有那样做。它通过 Ajax 完美呈现表单，但是...

it renders the form on all of the rows.

after edit and you click update it doesn't hide the form.

代码如下：

控制器

before_action :set_clock_entry, only: [:edit, :update]


def edit
end

def update
    respond_to do |format|
      if @clock_entry.update(clock_entry_params)
        format.js { flash.now[:notice] = 'Clock entry was successfully updated.' }
        format.html { redirect_to @clock_entry, notice: 'Clock entry was successfully updated.' }
        format.json { render :show, status: :ok, location: @clock_entry }
      else
        format.html { render :edit }
        format.json { render json: @clock_entry.errors, status: :unprocessable_entity }
      end
    end
  end

edit.html.erb

<h1>Editing Clock Entry</h1>

<%= render 'form', clock_entry: @clock_entry %>

<%= link_to 'Back', clock_entries_path %>

_form.html.erb

<%= simple_form_for clock_entry, remote: true do |f| %> # I am setting remote: true here
  <%= f.error_notification %>
  <%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>

  <div class="form-inputs">
    <%= f.input :purpose %>
  </div>

  <div class="form-actions">
    <%= f.button :submit, class: 'btn btn-primary btn-block btn-lg' %>
  </div>
<% end %>

edit.js.erb

$('#edit-clock-entry a').hide().parent().append("<%= j render 'form', clock_entry: @clock_entry %>")

html编辑link

<tr>
  <td>
    <div id="edit-clock-entry">
      <%= link_to 'Edit', edit_clock_entry_path(clock_entry), remote: true %>
    </div>
  </td>
</tr>

这是图片 - 它呈现在所有 ID 上

Answer 1

我把它 all/dedicate 给了 @bkunzi01 在 post 下的评论给 problem/question ，这就是帮助我解决它的原因。所以这就是我最终解决它的方法：

错误 1:

所以根据我之前提到的建议，我不得不重新定义我的 edit.js.erb 文件来处理行中编辑的唯一 ID。所以我的 edit.js.erb 变成：

$('#edit-clock-entry-<%= @clock_entry.id %> a').hide().parent().append("<%= j render 'form', clock_entry: @clock_entry %>")

错误 2:

我没有使用 ajax 创建更新操作，这使得它的行为方式与它的行为方式相同。所以我创建了一个名为 update.js.erb 的文件来处理当用户点击更新按钮时发生的事情。所以我的 update.js.erb 变成：

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

这就是我现在在图像中显示的内容

日志也显示右侧记录已更新

这对我来说已经解决了。

Rails 使用 Ajax 编辑操作未更新且无法正常工作

Rails Edit action not updating and not work properly using Ajax

javascript

ajax

jquery

ruby-on-rails

ruby-on-rails-6