Question

我有一张场地表。默认情况下，场地索引页面列出了所有场地记录，并允许您按区域过滤它们，或使用提交按钮和页面重新加载的同一页面上的表单键入。

然后显示找到的所有场地，表格自行重置。

如果只是点击不同的过滤器选项，如何在没有页面重新加载的情况下更新场地列表？所以没有提交按钮，表格保持改变状态。

场地控制器

  def index
    if
      @venues = Venue.with_type(params[:venuetypes]).with_area(params[:areas]).order("average_rating DESC").all
    else
      @venues = Venue.all
    end
    @venues = @venues.paginate :per_page => 15, :page => params[:page]
  end

场地index.html.erb 这已经使用jQuery-UI来获得更好看的复选框

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

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

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

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

<div class="venue_partials_container">
  <%= render :partial => 'venue', :collection => @venues %>
  <div class="clearall"></div>

  <div class="paginate_container">
    <div class="paginate">
      <%= will_paginate @venues %>
    </div>
  </div>
</div>

非常感谢任何帮助，非常感谢！

Answer 1

你可能想用jquery来做这件事。

最简单的方法是使用jquery在单击过滤器时自动发送表单，仍然有页面重新加载，但访问者不必单击提交按钮。

代码如下：

$(".checkbox-which-send-form-when-clicked").change(function(e){
  $(this).parents("form:first").submit();
});

请阅读jquery website

上的文档

每次单击复选框时不会重新加载页面的另一个解决方案是使用Ajax请求发送表单并获取结果。可以找到一个很好的教程here

Answer 2

所以我根本不认识Ruby，但我知道你需要使用jQuery实现的架构。首先，您需要设置一个将JSON返回给客户端的端点。当用户创建，修改或仅提交过滤器表单时，您将发布或获取JSON端点。它是您的选择，您可以在用户更改每个字段时检索它，或者在单击提交按钮时，它完全取决于您想要如何进行交互。

您将使用jQuery $ .ajax函数来检索JSON。我建议使用$ .post或$ .get来检索更新后的数据。jQuery AJAX Shorthand functions

您还可以为表单提交按钮设置单击事件处理程序。它可能看起来像这样，使用e.preventDefault很重要，因为这样可以防止整个页面回发。

$（“form：submit”）。click（function（e）{

e.preventDefault（）;

$。getJSON（[你的AJAX网址]，[过滤数据]，功能（结果）{ //使用模板更新表 }）;

}）;

在$ getJSON回调中，我建议使用jQuery模板或其他一些模板合并功能，如Resig的微模板。

我写了一系列关于在ASP.NET中做这种事情的博客文章。它应该很好地转换为Ruby，只需用你的Ruby服务器端替换ASP.NET的东西，你就应该在路上了。

My Thin ASP.NET Series

如何使用提交更改常规过滤器表单以使用AJAX？

2 个答案: