使用 jQuery-rails 替换 Ajax

Question

我有一个页面，上面有两个表单。每个表单都是过滤页面结果的不同方式。第一种形式是collection_select。第二种形式是text_field_tag。每个都提交到同一个控制器并使用index.js.erb 返回数据。 Firebug 显示 Ajax 调用对它们都有效并返回正确的结果，但是，只有从 text_field_tag 表单返回的结果才会真正更新页面。它在index.js.erb 中使用相同的代码来返回两个调用的结果，所以我不确定为什么一个有效而另一个无效。

index.html.erb：

<h1>Listing info</h1>
<%= render "partials/filter" %> OR
<%= render "search" %>

<div id="filter_table">
  <%= render 'list' %>
</div>

_list.html.erb：

<table class="tablesorter">
<thead><tr><td>Name</td><td>ID</td><td>Description</td></tr></thead>
<tbody>
<% @info.each do |inf| %>
<tr><td><%= inf.name %></td><td><%= inf.id %></td><td><%= inf.desc %></td></tr>
<% end %>
</tbody>
</table>

index.js.erb：

$("#filter_table").replaceWith("<div id=\"filter_table\"><%= escape_javascript(render 'list') %></div>");
$(".tablesorter").tablesorter({widgets: ['zebra']});

_filter.html.erb：

<%= form_tag("#", :method => "get", :remote => true) do %>
  <% cur_id = params[:id].to_i %>
  <%= submit_tag("Filter") %>
<% end %>

_search.html.erb：

<%= form_tag("#", :method => "get", :remote => true) do %>
  Search for an ID: <%= text_field_tag("id") %>
  <%= submit_tag("Search") %>
<% end %>

controller.rb:

def index
  @info = Blahblah
  respond_to do |format|
    format.html
    format.js
  end
end

以下是 AJAX 调用的一些示例返回：

作品：

http://hostname/blah?utf8=%E2%9C%93&id=Stuff&commit=Search

$("#filter_table").replaceWith("<div id=\"filter_table\"><table class=\"tablesorter\">\n  <thead>\n  <tr>\n    <th class=\"{sorter: \'digit\'}\">One<\/th>\n    <th>ID<\/th>\n    <th>Person<\/th>\n    <th>Person<\/th>\n    <th>Two<\/th>\n    <th>VID<\/th>\n    <th>type<\/th>\n    <th>Status<\/th>\n    <th>Three<\/th>\n    <th>Four<\/th>\n    <th>Five<\/th>\n  <\/tr>\n  <\/thead>\n  <tbody>\n  <tr>\n    <td><a href=\"/blah/801\" id=\"801\">801<\/a><\/td>\n    <td>Meep<\/td>\n    <td>1814<\/td>\n    <td>Meep2<\/td>\n    <td>Test<\/td>\n    <td>Stuff<\/td>\n    <td>unknown<\/td>\n    <td>submitted<\/td>\n    <td>47<\/td>\n    <td>16.6<\/td>\n    <td>7.9<\/td>\n  <\/tr>\n<\/tbody>\n<\/table>\n\n\n\n</div>");
$(".tablesorter").tablesorter({widgets: ['zebra']});

不起作用：

http://hostname/blah?utf8=%E2%9C%93&filter=123&commit=Filter

$("#filter_table").replaceWith("<div id=\"filter_table\"><table class=\"tablesorter\">\n  <thead>\n  <tr>\n    <th class=\"{sorter: \'digit\'}\">One<\/th>\n    <th>ID<\/th>\n    <th>Person<\/th>\n    <th>Person<\/th>\n    <th>Two<\/th>\n    <th>VID<\/th>\n    <th>type<\/th>\n    <th>Status<\/th>\n    <th>Three<\/th>\n    <th>Four<\/th>\n    <th>Five<\/th>\n  <\/tr>\n  <\/thead>\n  <tbody>\n  <tr>\n    <td><a href=\"/blah/801\" id=\"801\">801<\/a><\/td>\n    <td>Meep<\/td>\n    <td>1814<\/td>\n    <td>Meep2<\/td>\n    <td>Test<\/td>\n    <td>Stuff<\/td>\n    <td>unknown<\/td>\n    <td>submitted<\/td>\n    <td>47<\/td>\n    <td>16.6<\/td>\n    <td>7.9<\/td>\n  <\/tr>\n<\/tbody>\n<\/table>\n\n\n\n</div>");
$(".tablesorter").tablesorter({widgets: ['zebra']});

Firebug 显示来自 BOTH 调用的 Ajax 返回工作正常，但不知何故，replaceWith 不适用于从过滤器表单返回的内容，但对从搜索表单返回的内容有效。如果您注意到，示例 Ajax 结果完全相同，但不知何故，第一个有效而第二个无效。两者都使用相同的index.js.erb 代码。

更新：

我还尝试将上面的 index.js.erb 替换为：

$("#filter_table").empty();
$("#filter_table").append("<div id=\"filter_table\"><%= escape_javascript(render 'list') %></div>");
$(".tablesorter").tablesorter({widgets: ['zebra']});

它的工作方式与上述相同。使用text_field_tag 的查询有效，使用collection_select 的查询不起作用，即使它们都使用相同的index.js.erb 和相同的控制器和相同的视图代码，并且它们都返回相同的AJAX 结果。

更新2：

在使用collection_select 版本时，在 jquery 行 2215 中返回 AJAX 调用后，我在 firebug 中收到警告。

Use of attributes' specified attribute is deprecated.  It always returns true.
return !val || val.specified ? elem.val : elem.text; 

text_field_tag AJAX 调用没有收到此警告。

Answer 1

我试图运行你的代码（但没有这个$(".tablesorter").tablesorter({widgets: ['zebra']});，它工作正常。我粘贴了alert调用：

$("#filter_table").empty();
alert("1");
$("#filter_table").append("<%= j render 'list' %>");

当我看到“1”时，没有桌子。你的代码很好。也许这一切都与tablesorter 通话有关？