2012-09-28 82 views
0

我有一個有兩種形式的頁面。每個表單都是過濾頁面結果的不同方式。第一種形式是collection_select。第二種形式是text_field_tag。每個提交給相同的控制器並使用index.js.erb返回數據。 Firebug顯示Ajax調用適用於它們並返回正確的結果,但只有從text_field_tag表單返回的結果纔會實際更新頁面。它在index.js.erb中使用相同的代碼來返回來自兩個調用的結果,所以我不確定爲什麼一個可以工作,另一個不可以。Ajax replaceWith使用jQuery-rails

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調用一些示例回報:

WORKS:

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']}); 

沒有按」 T WORK:

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顯示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結果,也不起作用。

UPDATE2:

當使用collection_select版本,我得到的螢火警告jQuery的行AJAX調用返回後,2215

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

我沒有得到與text_field_tag此警告AJAX呼叫。

回答

0

我試圖運行代碼(但沒有這個$(".tablesorter").tablesorter({widgets: ['zebra']});,並能正常工作我粘貼alert電話:。

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

當我看到「1」,沒有表你的代碼是罰款。也許這全是關於tablesorter的調用?

+0

我試着向代碼中添加警報(「1」)並刪除tablesorter調用,並且行爲保持不變,無論我使用空/ append方法還是replaceWith方法它在我使用'text_field_tag'表單上的搜索按鈕時起作用,當我在'collection_select'上使用Filter按鈕時失敗形式)。 –