Rails：使用 Ajax 更新表格单元格而不刷新答案

【问题标题】：Rails: update table cell without refresh by using AjaxRails：使用 Ajax 更新表格单元格而不刷新
【发布时间】：2016-08-31 05:48:49
【问题描述】：

Index.html.erb 有一个表格和一个表格我使用 Ajax 使表单提交而无需重定向

<%= form_for approval,remote: true do |f| %>
  <%= f.check_box :pass %>
  <%= f.submit%>
<% end %>

但我也希望表格可以在我从下面提交而不刷新时立即更新。

<% @approval.each do |approval| %>
<td><%= approval.progress %></td>
<% end %>

控制器

class ApprovalController < ApplicationController
    def index
        @approval = Approval.where(user_id: id)
    end

    def update
       @approval.update_attributes(app_params)
       redirect_to approvals_path
    end 
end

如何达到这个目标？

【问题讨论】：

你能发送 ajax 请求并在成功处理程序上相应地更新 dom 吗？这会是一个解决方案吗？
@DiegoGallegos 我不知道该怎么做，不熟悉 Ajax

标签： javascript jquery ruby-on-rails ajax

【解决方案1】：

创建一个create.js，并使用create.js将表数据<td>附加到表中

approvals_controller.rb

class ApprovalController < ApplicationController
  def create
    @approval = Approval.new(params[:approval])
    @approval.save
    respond_to do |format|
      format.js
    end
  end
end

create.js.erb

<% if @approval.valid? %>
  $('#wrapper').append("<td><%= @approval.progress %></td>")
<% end %>

注意： #wrapper 是循环的包装器

【讨论】：

如果我不想创建一些东西，只想更新一些东西怎么办？创建 update.js.erb ?
是的，但在这种情况下，您需要替换现有的行内容
您还需要将id 添加到您的行中以识别它们以进行替换

【解决方案2】：

首先，您必须序列化您的表单。然后，您可以使用序列化数据执行以下操作：

var data = $('#form-id').serialize(); // example, this can vary depending on the complexity of the form

$.post(url, data ,function(response){
/* Here you would check the response from your server. You can send a string 
 such as 'SUCCESS' or 'FAILED' */
    if(response){
        /* update dom, you can use the selector of the dom element */
        $(HERE CLASS OR ID).text(data.valueToUpdate) // $('#id') or $('.id')
    }
});

这是一个简单的替代方法。

【讨论】：