使用 AJAX 更新部分视图

我有一个包含许多图像的页面，每个图像都有一个关联的文本框，用于提交该图像上的标签。每个图像和文本框都是通过局部视图呈现的。目前，我可以更新标签，并且通过整页刷新一切正常。我希望能够通过 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，因此我们将不胜感激。我想我已经包含了所有相关代码，但是请告诉我是否还需要提供其他内容。谢谢！

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

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

另一件事是，为什么你有

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

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

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

Update:您还需要确保已安装此软件，以便 Rails 可以正确触发您的 AJAX 调用https://github.com/rails/jquery-ujs 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)