Question

我的页面包含许多图像，每个图像都有一个相关的文本框，用于在该图像上提交标记。每个图像和文本框都通过局部视图呈现。目前，我可以通过整页刷新更新标签，一切正常。我希望能够通过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 %>

调用partial的主要形式：

<% @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，所以任何帮助都会非常感激。我想我已经包含了所有相关的代码，但是如果还有其他我需要提供的话，请告诉我。谢谢！

Answer 1

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

任何时候你使用这样的元素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)

Answer 2

在这一行<div id="image_#{image.id}">上你不能做正常的Ruby字符串插值bc你在rails视图中。需要<div id="image_<%= image.id %>

使用AJAX更新部分视图

2 个答案: