Question

我是编程的新手，我目前有一个场地表，可以使用索引页面上带有复选框的表单按类型和/或区域进行过滤。

在railscast的帮助下，我添加了使用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请求），或仅呈现部分（对于/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'
});

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

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

1 个答案: