我的视图中有一个semantic_form_for设置了搜索过滤器,并添加了更多过滤器,其中的按钮通过JavaScript添加了更多过滤器。
<%= semantic_form_for current_coach, :remote => true, :html => { :class => "custom-form rb-form", :id => "filter", :'data-url' => "#{roster_builder_coach_index_path}" } do |f| %>
<div class="filter_parent_container">
<% @search.conditions.each do |condition| %>
<%= render "filter", :condition => condition %>
<% end %>
</div>
<div class="bottom-info">
<div class="count">
<p class="num"><%= @athletes.count %></p>
<p>identified with this filter set</p>
</div>
<input type="submit" class="send-request" id="search-button" value="" />
<input type="button" class="add_filter" value="Add Another Filter" />
</div>
<div class="cl"> </div>
<% end %>
我需要通过ajax提交表单,但事实并非如此。我正在检查控制器中的参数,它们是:
{"action"=>"roster_builder", "controller"=>"coach"}
这是控制器(记录器正在检查参数):
def roster_builder
authorize! :access_roster_builder, current_coach
logger.info("**************");
logger.info("**************");
logger.info("**************");
logger.info("**************");
logger.info("**************");
logger.info(params);
@search = Search.new(sport: current_coach.primary_sport, conditions: params[:search])
@athletes = @search.query.page(params[:page]).per_page(8)
render "athletes" if request.format.js?
end
这是Ajax调用:
$("#filter").submit(function(){
$.ajax({
url: $("#filter").attr("data-url"),
type: 'POST',
success: function(data) {
$(".results")[0].parentNode.removeChild($(".results")[0]);
}
});
});
使用之前:remote =&gt;是的,它工作正常,但我需要跨过滤器的持久性(包括通过JS添加的过滤器),所以我需要Ajax来执行搜索而不是进行页面刷新。为什么params现在不工作,Ajax正在发送表单数据?我甚至尝试通过Ajax发送数据作为序列化,无济于事,如下所示:
$.ajax({
url: $("#filter").attr("data-url"),
type: 'POST',
data: $("form#filter").serialize(),
success: function(data) {
$(".results")[0].parentNode.removeChild($(".results")[0]);
}
});
任何帮助将不胜感激!
答案 0 :(得分:2)
请勿在表单的提交事件中同时使用remote: true
和ajax调用。
如果您自己进行ajax调用,那么您肯定需要使用data: $("form").serialize()
您必须在提交事件中返回false或执行e.preventDefault(),因为您实际上并不希望提交表单,因为您使用ajax调用自行发送数据。
这个处理ajax表单的插件很棒:http://www.malsup.com/jquery/form/