Rails Edit操作无法更新，并且无法使用Ajax

Question

我正在尝试做两件事：

1. 当用户单击“编辑”链接/按钮时，使用Ajax呈现“编辑”表单
2. 然后在编辑后，他们单击“更新”链接/按钮，隐藏表单。

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

  

  
1. 它在所有行上呈现表单。
  
2. 编辑后，单击“更新”不会隐藏表单。
  

下面是代码：

控制器

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编辑链接

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

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

Answer 1

我全力以赴/专用于问题/疑问后@ bkunzi01的评论，这就是帮助我解决它的原因。所以这就是我最终解决它的方式：

错误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();
})

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

日志还显示正确的记录已更新

这为我解决了。