如何修改我的过滤器表单以使用AJAX？

Question

我对编程非常陌生，我目前有一个场地表，它可以通过类型和/或区域使用索引页上的复选框进行过滤。

在railscasts的帮助下，我添加了使用AJAX添加评论到场地的功能。我如何去AJAX化我的过滤器表单？

到目前为止，我有这样的：

场馆控制器

def index 
    if 
    @venues = Venue.with_type(params[:venuetypes]).with_area(params[:areas]) 
    else 
    @venues = Venue.all 
    end 
end 

场馆指数

<div class="filter_options_container"> 
    <%= form_tag '', :method => :get, :id => 'filter_venues' do %> 

    <fieldset class="filter_form_fieldset venuetypes"> 
     <% Venuetype.all.each do |v| %> 
     <%= check_box_tag 'venuetypes[]', v.id, false, :id => "venuetype-#{v.id}" %> 
     <label for="venuetype-<%= v.id %>"><%= v.name %></label> 
     <% end %> 
    </fieldset> 

    <fieldset class="filter_form_fieldset areas"> 
     <% Area.all.each do |a| %> 
     <%= check_box_tag 'areas[]', a.id, false, :id => "area-#{a.id}" %> 
     <label for="area-<%= a.id %>"><p1><%= a.name %></p1></label> 
     <% end %> 
    </fieldset> 

    <div class="filter_form_button"> 
     <p2><input type="submit" value="Filter"/></p2> 
    </div> 
    <% end %> 
</div> 

我试图在应用了jQuery railscast用同样的方法使用AJAX添加评论，但太多的peices不适合，并认为我正在往下走用这个错误的路径，任何人都可以给我任何指针？

非常感谢您的帮助。

Answer 1

对于HTML/JS的一面，我会建议使用jQuery Form Plugin - 有很多选择，但在你的情况下，它可能是那样简单：

$('#filter_venues').ajaxForm({ 
    success: function() {/* ...load the response... */} 
}); 

对于Rails的一面，我想请执行下列操作（我做这在我的应用程序，所以我可以保证这是一个有效的参数设置）：

分裂您的索引页转换成一个模板和部分，像这样：

index.html.erb：

<!-- ...filter form, some other stuff... --> 
<table> 
    <thead> 
     <!-- all the attributes you feel like showing --> 
    </thead> 
<%= render :partial => 'index.ajax' -%> 
</table> 
<!-- more other stuff... --> 

_index.ajax.erb：

<tbody id="venue-tbody"> 
<% @venues.each do |venue| -%> 
    <tr> 
     <!-- all the attributes you have headers for --> 
    <tr> 
<% end -%> 
</tbody> 

然后，改变你的索引操作，因此呈现为完整页面（一/venues.html要求），或仅部分（一/场地阿贾克斯要求）：

respond_to do |format| 
    format.html {render :template => 'venues/index.html'} 
    format.ajax {render :template => 'venues/_index.ajax', :layout => false} 
end 

我需要注册自己的虚拟MIME类型来得到这个工作（在到config/environment.rb）：

#Make a fake MIME type for AJAX calls: 
Mime::Type.register 'application/x-ajax', :ajax 

这个设置更详细的JS例子看起来是这样的（我认为这应该是完全功能的。我想。）：

function load_new_venues(data, status, request) 
{ 
    $('#venue-tbody').replaceWith(data); 
    //Any event handlers that need to be set for the new HTML elements... 
} 

$('#filter_venues').ajaxForm({ 
    dataType: 'html', 
    success: load_new_venues, 
    url: '/venues.ajax' 
}); 

希望这会有所帮助 - 对不起，如果它变成了一本小说......干杯！