使用 AJAX 在 Rails 5 编辑表单中发送更新请求

Question

我的页面上的编辑表单出现问题，无法在 Ruby on Rails 5 中使用 AJAX 更新和保存属性。目标是在同一页面中呈现编辑表单，然后在编辑信息后提交表单并让信息显示备份。让编辑表单显示在页面上工作得很好，但之后它什么也不做。

我感觉它与表单发送到的位置有关，但我似乎无法弄清楚。我已经到处搜索了，似乎有很多关于 rails 3/4 的答案，但对于 rails 5 的请求是不同的。从我能找到的所有示例中，我的代码看起来是正确的，但显然我遗漏了一些东西。我仍然是一名初学者 Rails 开发人员，但据我了解，编辑表单应该向控制器发送更新请求，但似乎没有这样做。任何帮助表示赞赏。代码如下。

控制器

      def create
        @properties = Property.new(property_params)
        if @properties.save
          flash[:success] = "Property created successfully!"
          redirect_to properties_path
        else
          render 'new'
        end
      end

      def edit
        @properties = Property.find(params[:id])
        respond_to do |format|
          format.html { @properties.save }
          format.js
        end
      end

      def update
        @properties = Property.find(params[:id])
        @property.update_attributes(property_params)
        respond_to do |format|
          format.html { redirect_to property_path }
          format.js
        end
      end

查看

    <%= link_to fa_icon("edit", text: "Edit Property"), 
        edit_property_path(@properties), remote: true, class: "btn btn-
        primary btn-large btn-ouline" %> 

edit.js.erb

    $('div#show-edit').replaceWith('<%= j render("edit_prop_form") %>');

update.js.erb

    $('#edit_property_<%= @properties.id %>').replaceWith('<%= j render("properties_display") %>');

_edit_prop_form.html.erb 部分

    <%= bootstrap_form_for(@properties, layout: :horizontal, control_col: "col-sm-4", remote: true) do |f| %>
      <%= render 'shared/error_messages', object: f.object %>


      <%= f.text_field :company, class: 'form-control' %>

      <%= f.text_field :address1, class: 'form-control' %>

      <%= f.text_field :address2, class: 'form-control' %>

      <%= f.text_field :city,     class: 'form-control' %>

      <%= f.text_field :state,    class: 'form-control' %>

      <%= f.text_field :zipcode,  class: 'form-control' %>

      <%= f.form_group do %>
        <%= f.submit "Edit", class: "btn btn-primary" %>
      <% end %>

    <% end %>

编辑表单呈现的 HTML

    <form role="form" class="form-horizontal" id="edit_property_99"
    action="/properties/99" accept-charset="UTF-8" data-remote="true"
    method="post"><input name="utf8" type="hidden" value="✓"><input
    type="hidden" name="_method" value="patch">

TL;DR 编辑表单从初始编辑按钮呈现在页面上，但表单上的“编辑”按钮不会更新和保存编辑的信息并显示原始 div。

Answer 1

正如 mr12086 所指出的，在我的更新方法中 @property 应该是 @properties。进行更改后，一切都按预期工作。