使用 AJAX 更新局部视图答案

【问题标题】：Updating partial view with AJAX使用 AJAX 更新局部视图
【发布时间】：2011-07-15 23:35:19
【问题描述】：

我的页面包含许多图像，每个图像都有一个关联的文本框，用于在该图像上提交标签。每个图像和文本框都通过局部视图呈现。目前，我能够更新标签，并且通过整页刷新一切正常。我希望能够通过 AJAX 完成所有这些工作，但我遇到了一些麻烦。

这里是局部视图中的表单代码：

<%= image_tag image.src %>
<%= form_tag :controller => "images", :action => :update_tags, :remote => true, :image => image.id do %>
  <td><%= label_tag "Tags:" %></td>
  <td><%= text_field_tag :tags, image.tags %></td>
  <td><%= submit_tag "Submit" %></td>
<% end %>

以及调用部分的主要形式：

<% @images.each do |image| %>
  <div id="image_#{image.id}">
    <%= render :partial => "image_tag", :locals => { :image => image } %>
  </div>
<% end %>

在控制器的 :update_tags 方法中，我将图像的标签添加到数据库中，然后想要重新加载该图像的局部视图。

这是控制器的重定向代码：

respond_to do |format|
  format.js
  format.html { redirect_to :back, :remote => true }
end

还有 update_tags.js.erb：

$("#image_#{image.id}").html( "<%= escape_javascript(render :partial => 'image_tag', :locals => {:image => image} ) %>" );

它目前可以正常工作，但没有发生 AJAX 魔法。我仍在学习 Rails 和 jQuery，因此将不胜感激。我想我已经包含了所有相关的代码，但如果还有什么我应该提供的，请告诉我。谢谢！

【问题讨论】：

标签： ruby-on-rails ajax ruby-on-rails-3 jquery

【解决方案1】：

我看到错误的一件事是，您不能为每个图像 div 使用 #image（假设页面上有很多这样的 div）。

任何时候你使用这样的元素ID，它必须是整个页面唯一的，否则jQuery会找到#image的第一个实例然后停止。因此，您需要通过可能包含模型 ID 等来使这些图像 ID 中的每一个都是唯一的，因此它将是 #image_1 #image_2 等。

还有一点，你为什么有

format.html { redirect_to :back, :remote => true }

在 AJAX 调用的控制器操作中？ AJAX 只会返回format.js，所以似乎没有必要。也许我在那里误解了一些东西。

您的其余代码看起来是正确的。您可能需要检查 Rails 服务器日志，以确保您的 update_tags.js.erb 文件在调用期间正在呈现。如果是，那么你有一个 javascript 错误。

更新：您还需要确保已安装此工具，以便 Rails 可以正确触发您的 AJAX 调用https://github.com/rails/jquery-ujs

如果您使用 AJAX，则不需要呈现 HTML。默认情况下，它将呈现 controller_action_name.js.erb，因为它是 AJAX 调用而不是浏览器调用。您应该在 Rails 服务器输出中看到类似这样的内容：

Started PUT "/images/1/update_tags" for 127.0.0.1 at 2011-07-16 09:33:20 -0400
  Processing by ImagesController#update_tags as JS
  Parameters: {"image_id"=>"1"}
  Image Load (1.6ms)  SELECT "images".* FROM "images" WHERE "images"."id" = 1 LIMIT 1
  CACHE (0.0ms)  SELECT "images".* FROM "images" WHERE "images"."id" = 1 LIMIT 1
Rendered images/update_tags.js.erb (11.3ms)
Completed 200 OK in 346ms (Views: 23.7ms | ActiveRecord: 1.7ms)

【讨论】：

在发布此问题后，我实际上已将我的 div id 更新为您所说的内容。它现在已在我的 OP 中更新。我注释掉了 format.html 行，现在当我以表单提交内容时，它不会呈现任何 HMTL。我看到“localhost:3000/images/update_tags?remote=true&image=1”作为 URL，我看到在 Rails 服务器中提交的参数，但没有呈现 HTML。这是否意味着我的javascript没有被调用？ JS 文件不应该以控制器中调用的方法命名（所以在我的例子中，update_tags.js.erb）？
查看我的更新答案，我想您可能缺少 Rails 处理 AJAX 调用的 Rails jquery 适配器

【解决方案2】：

在这一行 <div id="image_#{image.id}"> 上，您无法进行正常的 Ruby 字符串插值，因为您在 Rails 视图中。需要<div id="image_<%= image.id %>

【讨论】：