Rails 5：更新操作不适用于 AJAXified 表单

Posted 2023-02-26

【中文标题】Rails 5：更新操作不适用于 AJAXified 表单

【英文标题】：Rails 5: update action not working for AJAXified form

【发布时间】：2016-11-06 07:24:28

【问题描述】：

我有一个下拉视图，在用户选择的地方，可以编辑特定的用户角色。

在 /common/roles/index.erb 我有这个：

<form class="form-horizontal" role="form" method="get" action="/common/roles" data-remote="true">
<div class="col-sm-10"><select class="form-control m-b" name="users" id="user_list">
  <option value="">Please, select user</option>
     <% @users.each do |user| %>
        <% for role in user.roles %>
           <option value="<%= role.id %>"><%= user.name %></option>
        <% end %>
     <% end %>
  </select>
</div>
</form>
<!-- Here we render role edit form -->
<div id = 'selected_role' ></div>
<!-- Role edit form ends -->

这是选择显示用户名的位置，角色 ID 是选项值。

在 roles.js 我有侦听器，其中选择角色 ID 传递给编辑：

(function($) 
$('#user_list').change(function() 
  var roleId = $( "#user_list" ).val();
  $.ajax(
    url: '/common/roles/' + roleId + '/edit',
    method: 'GET',
  );
);
)(jQuery); /*global jQuery*/

/common/roles/edit.js.erb 看起来像这样：

$("#selected_role").html("<%=j render 'common/roles/editrole', locals:  role: @role  %>");

它呈现角色编辑部分/common/roles/_editrole.html.erb

<%= form_for :role, method: :patch, remote: true do |f| %>
<form class="m-t" role="form" action="" id="editrole">
        <div class="form-group">
            <label class="col-sm-2 control-label">General</label>
            <div class="col-sm-10" >
           <%= f.select :general, Role.generals.to_a.map  |w| [w[0].humanize, w[0]] , , class:"form-control m-b" %>
            </div>
        </div>
   <%= f.submit "Save changes", class: "btn btn-primary block full-width m-b" %>
  <% end %>
</form>

要完成此表格，我仍然需要完成有问题的更新操作。 在提交角色编辑表单时，它会启动 PATCH，但会使用 Edit url。 这是控制台中的错误：

Started PATCH "/common/roles/1/edit"
ActionController::RoutingError (No route matches [PATCH] "/common/roles/1/edit"):

虽然有特定的 PATCH 路由：

common_role PATCH  /common/roles/:id(.:format)     common/roles#update

在 /common/roles_controller.rb 我有这个：

def update
@role = Role.find(params[:id])
if @role.update_attributes(role_params)
respond_to do |format|
  format.html 
              flash[:success] = "Role updated!"
              redirect_to common_roles_path
  
  format.js

在 /common/roles/update.js.erb 我有这行：$('.editrole').hide()

我可以在编辑中打开表单，直到更新操作正常。 请问如何解决更新操作错误？

---

解决方案更新

在更新操作中我错过了respond_to do |format| + /common/roles/update.js.erb 我不得不更改为：

$('.container').empty().append('<%=
  escape_javascript(
    render 'update'
  )
%>')

【参考方案1】：

试试这个。

<%= form_for role, url: common_role_path(role), method: :patch, remote: true do |f| %>

role 这里指的是你在渲染局部变量时传递的局部变量。

【讨论】：

谢谢，这给出了错误：ActionView::Template::Error (undefined local variable or method role'` 并且编辑表单没有加载。但是，如果我执行<%= form_for @role, url: common_role_path(@role), method: :patch, remote: true do |f| %>，它会以正确的 url 启动 PATCH，但会出现此错误：Completed 500 Internal Server Error 它已接近解决方案，但还没有...有什么问题？

+ 错误后跟这几行：ArgumentError (too few arguments):app/controllers/common/roles_controller.rb:54:in formatapp/controllers/common/roles_controller.rb:54:in update

你在局部变量 role 中传递 @role 对吗？

是的，没错。看起来我在我有 format.html 的控制器的更新操作中有问题。它在那里要求不同的论点。基本上，我希望在角色更新后返回索引并闪现该角色已更新的成功。

@matiss 您需要添加format.js，默认情况下会查找update.js.erb。创建update.js.erb 并在其中添加一个javascript响应