通过 ajax 调用从表单更新类别对象答案

【问题标题】：Update category object from form through ajax call通过 ajax 调用从表单更新类别对象
【发布时间】：2018-12-02 23:10:49
【问题描述】：

我正在尝试为类别创建索引页面以显示所有类别。每行都有类别名称和用于删除和编辑类别的按钮。当我单击编辑按钮时，我希望将行更改为带有预填充名称和按钮保存的文本字段的表单。到目前为止，我完成了单击编辑按钮并在行内显示编辑表单。但是当我点击保存按钮时，什么也没有发生。就像什么都没有。控制台没有错误，网络显示没有调用，服务器日志显示没有活动。我以为我添加了所有必要的代码来处理呼叫，但此时我不知道在哪里看。有人可以建议吗？我使用 Rails v 4.2.5。

应用程序.js

//this is for clicking edit and displaying Edit form inside the row
document.addEventListener("turbolinks:load", function() {
      $("[name='edits']").on('ajax:complete', function(event, data, status) {
        $(this).parent().parent().html(data.responseText)
      })
    })

    //this is to handle click on save button
    document.addEventListener("turbolinks:load", function() {
      $('#edit-form').on('ajax:complete', function(event, data, status){
        $('#categories').html(data.responseText);
      })
    })

类别控制器：

def edit
    render  partial: 'categories/edits'
  end

  def update
    if @category.update(category_params)
      flash[:success] = "Category #{@category.name} was saved successfully"
    else
      flash[:danger] = "There was an error please try again!"
    end
    render partial: 'categories/list'
  end

部分编辑表单：

<div>
  <%= form_tag category_path, remote: true, method: :put, name: "edit-form" do %>
    <div class="form-group row text-center col-md-12">
      <div class="col-md-10">
        <%= text_field_tag :name, @category.name, 
                                  placeholder: "Category Name", autofocus: true,
                                  class: "form-control" %>
      </div>
      <div class="col-md-2">
        <%= button_tag(type: :submit, class: "btn btn-primary") do %>
          Save
        <% end %>
      </div>
    </div>
  <% end %>
</div>

在 html 中，我注意到输入字段和按钮位于表单之外。这可能是问题的原因吗？就这样

<form></form>
<input>
<button></button>

【问题讨论】：

标签： javascript ruby-on-rails ruby ajax ruby-on-rails-4

【解决方案1】：

是的，我认为问题在于将表单放入 tr 标签中。将其移入 td 似乎可以解决问题。

【讨论】：