单击按钮时如何使输入字段可见或单击按钮以在滑轨上显示红宝石时如何创建相同的字段

Question

rails newbie here.

this is my current form

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

what i want is this, when user clicks "add filter" i want another field to pop up with the same eventNames array as a collection select.I tried to create another button and get it's tag and if its not the submit button and its add filter button render another form.

but this is terribly bad as a interface and as a user experience.

i want my user to be able to remove the second event field at anytime, without having to submit the form.

So i need to add another button in it to remove the newly made visible form.

How can i achieve this

Answer 1

As i said in my comment if you have a restriction that a user could add only a single or lets say a fixed number of filters then you can simply show and hide your collection by js. Your form would have a hidden collection list

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

hide your collection by css

.hidden{display: none;} 

and show it by js when a user click on add filter, assuming it's a link you could do:

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

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

---

If user can add multiple filters then you'll need to add them by ajax. For ajax follow these steps:

a. Create a custom route for your action:

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

b. create your link for adding filter:

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

c. Get event_id by js and send a ajax request:

$(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. Create add_filter action in your controller:

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

e. Create your new collection and append it by js in app/views/your_controller/add_filter.js.erb file

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 %>");

You'll have to use humanize or number_and_words to convert your @event_id to words format and also you'll have to change :resource accordingly