Rails 5 - 使用 Ajax 更新模型并将请求响应 html 附加到视图中

Question

我正在通过带有 remote: true 的表单调用用户控制器更新操作。我想在视图中呈现更新的用户 html，所以我在控制器中有这段代码：

def update
  @user = User.find(params[:id])
  respond_to do |format|
    if @user.update_attributes(user_params)
      format.html {
        flash[:success] = "Profile updated"
        redirect_back fallback_location: @user
      }
      format.js { render partial: 'user', locals: { user: @user } }
    else
      format.html { render 'show' }
      format.js {}
    end
  end
end

它工作正常，服务器响应正确呈现 html 和状态 200。问题出在我的 coffescript 上：

$ ->
  $(".edit_user[data-remote]").on "ajax:success", (e, data, status, xhr) ->
    console.log(e)
    console.log(data)
    console.log(status)
    console.log(xhr)
    $(this).closest('tr').fadeOut()
    if $(this).data('action') == 'hire'
      $('#active-users').append data
    else
      $('#archive-users').append data

这段代码没有执行，我不知道为什么。我发现如果我从控制器 coffescript 中删除 render partial: 'user', locals: { user: @user } 执行（但我当然需要这个呈现 html）。

如何修复我的 coffescript 以使其正常执行？我对 JS 和 CoffeScript 还很陌生。

Answer 1

当你使用'remote: true'时，会自动执行相应控制器动作的Javascript文件，所以在这种情况下用户'update'。不需要单独的文件绑定 ajax:success 或类似的东西。

所以，首先改变：

format.js { render partial: 'user', locals: { user: @user } }

收件人：

format.js {}

然后创建文件 views/user/update.js.erb，并在该文件中添加：

$('#active-users').append('<%= j render partial: 'user', locals: { user: @user } %>')

'j' 将转义 HTML 的输出，因此 Javascript 不会抛出错误。控制器操作完成后，它将部分内容附加到#active-users。当然，您也可以在此文件中添加您需要的任何其他 Javascript。

Rails 5 - 使用 Ajax 更新模型并将请求响应 html 附加到视图中

Rails 5 - Updating model with Ajax and appending request response html into view

ajax

jquery

ruby-on-rails

coffeescript