在数据库更新后，如何使Rails使用Ajax更新HTML表行？

debugcn 发表于 Dev

迈克尔·杜兰特

我有一个包含多行的目录。
对于任何给定的行，我希望能够验证记录并通过将“验证链接”超链接更改为纯文本“已验证”而立即在屏幕上反映出来。
对于其他人来说，这似乎是一种相当普遍的模式。

我有以下标记：

...# (table stuff).
 = link_to 'verify', verify_link_path(:id => link.id),  class: 'verify', remote: true

这成功调用了链接控制器的“ verify_link”方法：

def verify_link
  @link = Link.find(params[:id])
  # Ignore additional verify logic for now, just set as verified (when the user clicks verify).
  @link.verified_date = Time.now
  @link.save!
  respond_to do |format|
    format.js
  end 
end

我知道这行得通...因为数据库已更新。

最后，我想更新页面（table-row-cell）以反映这一点。这就是我被困住的地方。

控制器方法成功调用以下app/views/links/verify_links.js.erb文件：

$(function() {
$(".verify")
  .bind("ajax:success",function(event,data,status,xhr) {
    this.text='verified';
    alert("The link was verified.");
  });
});

我知道它会被调用...因为我可以放在alert("hello world");开始位置，并且它会显示为弹出窗口。

无效的部分是用纯文本“ verified”替换“ verify”链接。实际上，我什alert至不能在那里工作。用户界面中没有任何更新。但是，在后端对数据库进行了更改，因此，如果刷新页面，我确实会看到更改反映在该点上。

笔记：

存在多个链接是否存在问题？即我应该使用一个ID，我必须从表行ID或数字中扣除
应用程序版本是带有资产管道的Rails 3.2.17。
该应用程序最初是用Rails 2编写的，后来进行了升级。
我正在使用jquery 1.7.2和rails.js，但最初要避免使用诸如angular，ember等框架，因为我想首先学习更多有关底层的知识。一旦完成，我将使用一个框架。

曼迪普

@hjing是正确的。app / views / links / verify_links.js.erb中的代码已经是对ajax的响应。您无需将其绑定到ajax：success。

如您建议的那样，您需要为每个链接创建一个ID，您必须从表格的行ID或数字中找出该链接。例如，您的链接将如下所示：

= link_to 'verify', verify_link_path(:id => link.id),  class: 'verify', id: "verify_#{table_row_no}", remote: true

然后在您的app / views / links / verify_links.js.erb中，您可以定位该特定链接，如下所示：

$("#<%= j 'verify_#{table_row_no}' %>").text("verified");
$("#<%= j 'verify_#{table_row_no}' %>").prop("href","#"); #you would also want to change the href in case someone clicks it again

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。