如何修改我的过滤器表单以使用 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 添加评论，但是有太多不适合的部分，并且认为我正朝着错误的方向前进，谁能给我任何指示?

非常感谢您的帮助。

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 请求）或仅呈现部分页面（对于 /venues.ajax 请求）：

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

希望这会有所帮助 - 如果它变成了一本小小说，我很抱歉......干杯！