javascript - rails 5 : update action not working for AJAXified form

Question

我有带有下拉列表的 View ，在用户选择时，可以编辑特定的用户 Angular 色。

在/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 -->

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

在roles.js中，我有监听器，其中选择的 Angular 色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 } %>");

它呈现 Angular 色编辑部分/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>

要完成此表单，我仍然需要完成遇到问题的更新操作。 提交 Angular 色编辑表单时，它会启动 PATCH，但带有编辑 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'
  )
%>')

Answer 1

试试这个。

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

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