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

问题描述

| 我有一张桌子。默认情况下，场所索引页面会列出所有场所记录，并允许您按区域和/或使用同一页面上的表单（带有提交按钮和页面重新加载）过滤它们。 然后将显示找到的所有场所，并且表单将自行重置。 仅单击不同的过滤器选项，如何在不重新加载页面的情况下更新场所列表？因此没有提交按钮，并且表单保持更改状态。 场地管理员

  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,: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>

非常感谢您提供的任何帮助！     

解决方法

        您可能想使用jquery来做到这一点。 最简单的方法是在单击过滤器时使用jquery自动发送表单，仍然有页面重新加载，但访问者不必单击“提交”按钮。 该代码将类似于：

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

请阅读jquery网站上的文档 每次单击复选框都不会使页面重新加载的另一种解决方案是使用Ajax请求发送表单并获取结果。一个很好的教程可以在这里找到     ,        所以我一点也不了解Ruby，但是我知道您需要使用jQuery实现的体系结构。首先，您需要设置一个端点，该端点将JSON返回给客户端。当用户创建，修改或仅提交过滤器表单时，您将发布或获取JSON端点。它是您的选择，您可以在用户更改每个字段时或在单击提交按钮时检索它，这完全取决于您要使其交互的方式。 您将使用jQuery $ .ajax函数检索JSON。我建议使用$ .post或$ .get来检索更新的数据。jQueryAJAX简写函数 您还可以为表单提交按钮设置click事件处理程序。看起来可能像这样，使用e.preventDefault很重要，因为这可以防止整个页面回发。 $（\“ form：submit \”）。click（function（e）{ e.preventDefault（）; $ .getJSON（[您的AJAX网址]，[来自过滤器的数据]，函数（结果）{         //使用模板更新表     }）; }）; 在$ getJSON回调中，我建议使用jQuery模板或其他模板合并功能，例如Resig的微型模板。 我写了一系列有关在ASP.NET中做这种事情的博客文章。它应该可以很好地转换为Ruby，只需将ASP.NET内容替换为Ruby服务器端，就可以了。 我的Thin ASP.NET系列