使用AJAX更新局部视图

Question

使用AJAX更新局部视图

3

我可以为您翻译。这段内容涉及编程，需要将页面上的多个图片与相应的文本框关联起来，以便提交图片标签。每个图片和文本框都是通过一个部分视图呈现的。目前，我能够通过完整页面刷新更新标签，并且一切正常。但我希望能够通过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，因此非常感谢您的帮助。我认为我已经包含了所有相关的代码，但如果需要提供其他内容，请告诉我。谢谢！

- jnevelson

2个回答

1

在这一行中<div id="image_#{image.id}">，你不能进行普通的Ruby字符串插值，因为你处于Rails视图中。需要改成<div id="image_<%= image.id %>。

- Verdi_Michael

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- iwasrobbed · Accepted Answer

我看到的一个问题是，您不能为页面上的每个图像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)