Question

在这里引导新手。

这是我目前的表格

 <%= f.input :campaign_name , :input_html => {:style=> 'width: 300px'} %>
 <%= f.input :date_range, :input_html => {:style=> 'width: 300px'}%>
 <%= f.label :first_event %>
 <%= f.collection_select :first_event, eventNames, :to_s, :to_s, include_blank: true %>
 <br><br><br>
 <%= f.label :second_event %>
 <%= f.collection_select :second_event, eventNames, :to_s, :to_s, include_blank: true%>

我想要的是，当用户点击“添加过滤器”时，我想要另一个字段弹出相同的eventNames数组作为集合select.I尝试创建另一个按钮并获取它的标签，如果它不是提交按钮及其添加过滤器按钮呈现另一种形式。

但作为一个界面和用户体验，这是非常糟糕的。

我希望我的用户能够随时删除第二个事件字段，而无需提交表单。

所以我需要在其中添加另一个按钮以删除新制作的可见表单。

我怎样才能实现这个目标

Answer 1

正如我在评论中所说，如果你有限制用户只能添加一个或者说固定数量的过滤器，那么你可以简单地用js显示和隐藏你的收藏。 您的表单会有一个隐藏的收藏列表

<%= f.input :campaign_name , :input_html => {:style=> 'width: 300px'} %>
<%= f.input :date_range, :input_html => {:style=> 'width: 300px'}%>
<%= f.label :first_event %>
<%= f.collection_select :first_event, eventNames, :to_s, :to_s, include_blank: true %>
<br><br><br>
<%= f.label :second_event %>
<%= f.collection_select :second_event, eventNames, :to_s, :to_s, include_blank: true%>
<%= f.label :third_event, class: "hidden" %>
<%= f.collection_select :third_event, eventNames, :to_s, :to_s, include_blank: true, class: "hidden"%>

通过CSS隐藏您的收藏

.hidden{display: none;}

并在用户点击添加过滤器时显示js，假设它是您可以执行的链接：

= link_to "Add Filter", "#", id: "add-filter"

$(document).on("click","#add-filter", function(e){
  $(".hidden").show();
  e.preventDefault();
});

如果用户可以添加多个过滤器，那么您需要通过ajax添加它们。对于ajax，请按照以下步骤操作：

一个。 为您的操作创建自定义路线：

post "/filter" => "your_controller#add_filter", as: "filter"

湾创建添加过滤器的链接：

<%= link_to "Add Filter", filter_path, id: "add-filter", data: {event_id: "2", url: filter_path}%>

℃。 通过js获取event_id并发送ajax请求：

$(document).on("click","#add-filter".function(e){
  var eventId = $(this).data("eventId");
  var url = $(this).data("url");
  $.ajax({
    type: "POST",
    url: url,
    data: {id: eventId}
  });
})

d。 在控制器中创建add_filter操作：

def add_filter
  @event_id = params[:id]
  respond_to do |format|
    format.js
  end
end

即创建新的收藏并按 app / views / your_controller / add_filter.js.erb 文件中的js追加

var label = "<%=j label_tag "#{@event_id.humanize}_event" %>" 
var collection = "<%=j collection_select(:resource, "#{@event_id.humanize}_event".to_sym , eventNames, :to_s, :to_s, include_blank: true) %>"

$("#form_id").find("select").last().after(label).after(collection);
$("#add-filter").data("eventId","<%=j @event_id + 1 %>");

您必须使用humanize或number_and_words将@event_id转换为字词格式，并且您还必须更改：资源

如何在单击按钮时使输入字段可见，或者在单击按钮上的ruby时创建相同的字段

1 个答案: