單擊按鈕時如何使輸入字段可見或單擊按鈕以在滑軌上顯示紅寶石時如何創建相同的字段

Question

Rails新手在這里。

這是我目前的表格

 <%= 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%>

我想要的是，當用戶單擊“添加過濾器”時，我希望另一個字段以與集合select相同的eventNames數組彈出。我試圖創建另一個按鈕並獲取其標簽，如果不是提交按鈕及其添加，過濾器按鈕呈現另一種形式。

但這對於界面和用戶體驗來說是非常糟糕的。

我希望我的用戶能夠隨時刪除第二個事件字段，而不必提交表單。

所以我需要在其中添加另一個按鈕以刪除新創建的可見表單。

我怎樣才能做到這一點

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}%>

C。 通過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

即 創建您的新集合，並通過js將其附加到app / views / your_controller / add_filter.js.erb文件中

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來將number_and_words轉換為單詞格式，並且還必須相應地更改：resource