Ajax replaceWith using jQuery-rails



我有一个页面,上面有两个表单。每个表单都是过滤页面上结果的不同方式。第一种形式是collection_select。第二种形式是CCD_ 2。每个控制器都提交给同一个控制器,并使用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>nnnn</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>nnnn</div>");
$(".tablesorter").tablesorter({widgets: ['zebra']});

Firebug显示,两个调用的Ajax返回都很好,但不知何故,replaceWith不适用于从Filter表单返回的东西,但适用于从Search表单返回的事情。如果你注意到,示例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版本时,AJAX调用在jquery第2215行返回后,我在firebug中收到警告。

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

我在text_field_tagAJAX调用中没有得到此警告。

我试着运行你的代码(但没有这个$(".tablesorter").tablesorter({widgets: ['zebra']});,它运行得很好。我粘贴了alert调用:

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

当我看到"1"时,没有桌子。你的代码很好。也许这都是关于tablesorter的电话?

最新更新