How do you add a data-column to Rail's form builder select?
Here is the basic HTML that I want to reproduce.
<div class="input-group">
<select class="form-control" data-column="3">
</select>
</div>
Here is the code that I can't get right:
<div class="field">
<%= f.label :category %><br>
<%= f.select :category, {prompt: "Select Category"}, {class: "input-lg", :id => "category"}, data-column: 3 %>
</div>
I have tried putting data-column in the prompt section and in the class section.
You should use
"data-column" => 3
I thought the problem was only the data-column, this is the complete solution (it's not what you are trying to reproduce but I think this example is more detailed):
<%= f.select :category, [], { :include_blank => 'Select Category'}, {:class => 'input-lg', :id => 'category', "data-column" => 3} %>
to get:
<select class="input-lg" data-column="3" id="category" name="something[category]">
<option value="">Select Category</option>
</select>
If, instead, you are trying just to get the code you specified in your question, you can do:
<div class="input-group">
<%= f.select :category, [], {}, {:class => 'form-control', "data-column" => 3} %>
</div>
I'm using a collection_select in a form_for however the options are not displaying in the browser (empty select box) but are present in the debugger view. (this happens in both chrome and IE10).
View:
<%= form_for(#lot) do |f| %>
<%= f.label :client_id, "Client" %>
<%= f.select :client_id, collection_select(:lot, :client_id, Client.all, :id, :org, :include_blank => "Please select") %>
Rendered page source:
<label for="lot_client_id">Client</label>
<select id="lot_client_id" name="lot[client_id]"></select>
<option value="">Please select</option>
<option selected="selected" value="1">Client 1</option>
<option value="2">client 2</option>
Controller:
def new
#lot = Lot.new(:client_id => 1)
end
Any insight would be much appreciated thanks,
you can try this as eg.
<%= f.collection_select(:category_id, Category.all,:id,:name, :required=>true) %>
collection_select is also a formHelper of sorts which returns both a select and options elements, try:
<%= f.collection_select(:lot, :client_id, Client.all, :id, :org, :include_blank => "Please select") %>
instead
You are rendering collection_select helper inside the select helper, which is wrong. You have to do it like this:
<%= f.collection_select(:client_id, Client.all, :id, :org, :include_blank => "Please select") %>
I'm using the jquery-ui datepicker in a Rails app. I have 2 forms for entering data. One is a regular Rails view page and the other is a Bootstrap modal. The modal one isn't working.
This is the coffeescript (I'm assuming this will work for both):
$("#expense_exp_date").datepicker dateFormat: "yy-mm-dd"
This is the Rails view code and corresponding html:
<%= f.input :exp_date, :as => :string, :label => 'Date', :class => 'calendar hasDatepicker', :input_html => {:value => Date.today.to_s} %>
<input class="string required hasDatepicker" id="expense_exp_date" name="expense[exp_date]" size="50" type="text" value="2013-01-21">
This is the Bootstrap modal code and corresponding html:
<%= f.input :exp_date, :as => :string, :label => 'Date', :class => 'calendar hasDatepicker', :input_html => {:value => Date.today.to_s}, :input_html => {:style => 'width: 180px'} %>
<input class="string required" id="expense_exp_date" name="expense[exp_date]" size="50" style="width: 180px" type="text">
Why is "hasDatepicker" missing from the modal html?
Thanks!
Try to pass the class option inside the input_html Option hash:
<%= f.input :exp_date, :as => :string, :label => 'Date',
:input_html => {
:value => Date.today.to_s,
:class => 'calendar hasDatepicker'} %>
I am trying to have the following HTML code in my form:
<select name="user[language_ids][]">
<option value="">Please select</option>
<option value="1" selected="selected">English</option>
<option value="2">Spanish</option>
</select>
<select name="user[language_ids][]">
<option value="">Please select</option>
<option value="1" selected="selected">English</option>
<option value="2">Spanish</option>
</select>
To allow the User to select two languages when he signs up.
I have tried with this:
<%= f.label :languages %>
<%= f.collection_select(:language_ids, Language.all, :id, :name) %>
<%= f.collection_select(:language_ids, Language.all, :id, :name) %>
And also with this:
<%= f.label :languages %>
<%= f.collection_select(:language_ids[], Language.all, :id, :name) %>
<%= f.collection_select(:language_ids[], Language.all, :id, :name) %>
After revieweing the answers, I have tried with this:
<%= collection_select(:user, :language_ids, Language.all, :id, :name, {}, {:name => 'user[language_ids][]' }) %>
<%= collection_select(:user, :language_ids, Language.all, :id, :name, {}, {:name => 'user[language_ids][]' }) %>
But the problem here is that both of the selects have the same ID and also, they are not associated with the form builder f
Any thoughts on the best way to do so?
Try,
<%= f.collection_select(:language_ids, Language.all, :id, :name,{}, {:multiple => true}) %>
You can create a collection of fields by using
fields_for.
The two select will have the same id but
collection_select
takes an optional hash containings html options where you can set a custom id.
<%= f.fields_for :language_ids do |language| %>
<%= language.collection_select(nil, Language.all, :id, :name,
{include_blank: "Please select", selected: 1},
{id: :user_language_id_1}) %>
<%= language.collection_select(nil, Language.all, :id, :name,
{include_blank: "Please select", selected: 1},
{id: :user_language_id_2}) %>
<% end %>
generates the following output:
<select id="user_language_id_1" name="user[language_ids][]">
<option value="">Please select</option>
<option value="1" selected="selected">English</option>
<option value="2">Spanish</option>
</select>
<select id="user_language_id_2" name="user[language_ids][]">
<option value="">Please select</option>
<option value="1" selected="selected">English</option>
<option value="2">Spanish</option>
</select>
Since you wrote "user[language_ids][]" in the name attribute of your select, I'm forced to assume you want a multiple select box. You should do this:
f.collection_select (:language_ids, Language.all, :id, :name,
{:prompt => true}, {:multiple => true})
Not a very well documented feature, for sure.
EDIT: Looking further on your example and some of the answers, I would like to point out a few things:
Your example has the prompt "Please select" as first option of the select box, but then you want english to be "selected in both of your examples. If you want an option to be pre-selected which it as well the first option of the select box, then why do you have the prompt option? One uses it to force the user to choose something.
You wrote in one answer that you want multiple selects instead of a multiple select, reason why you don't want the :multiple => true solution. I'd still recommend you to use it, but maybe you really have a necessary use case. Therefore, I would recommend you to use the select_tag helper directly (I don't think you'll achieve that with form tag helpers):
select_tag "user[language_ids][]",
options_from_collection_for_select(Language.all, "id", "name"),
:prompt => true, :id => "user_language_ids"
key here is, the mutiple selects have to have different ids, which you will have to pass explicitly, so it'll be on your hands.
You should be able to do something like this:
<%= f.label :languages %>
<%= f.collection_select(:language_ids, Language.all, :id, :name, {}, {id => "language_1", :name => "user[language_ids][]"}) %>
<%= f.collection_select(:language_ids, Language.all, :id, :name, {}, {id => "language_2", :name => "user[language_ids][]"}) %>
Basically sending 2 (or more) fields with the same attribute doesn't work, because params will be turned into a hash : {language_ids: [1], language_ids: [2]} and since you have the same key the last one will override the previous one(s).
{a: 1, a: 2}[:a] #=> 2
To circumvent this problem you need to to create different attributes and then concatenate them in one. For this you'll need facade attributes in your model :
class Language
attr_writer :language_one_id, :language_two_id
before_save :gather_languages
def gather_languages
self.language_ids= [language_one_id, language_two_id]
end
# for the form to display chosen lang (idem with two)
def language_id
language_ids.first
end
end
# view/_form
=f.select :language_one_id, Language.all.map {|l| [l.name, l.id]}
=f.select :language_two_id, Language.all.map {|l| [l.name, l.id]}
But frankly I think you're making your life harder by going against conventions here (I'd use checkboxes instead).
You could add a "second_language" column to your table and then make it have the same content as the first language column.
You could use fields_for like this:
<%= form_for #user do |f| %>
...
<h2>Languages</h2>
<%= fields_for :languages do |lang_form| %>
<%= lang_form.collection_select :language_id, Language.all, :id, :name %>
<% end %>
..
<% end %>
On your controller, in your new or edit method, you can do this to accept 2 languages
2.times { #user.languages.build }
First of all you have to edit your user model:
user.rb
has_many :languages
accepts_nested_attributes_for :languages
Next generate model:
$> rails g model language user_id:integer name
language.rb
belongs_to :user
users_controller.rb (probably in 'new' action)
2.times do
language = #user.language.build
end
_form.html.erb
<%= form_for #user do |f| %>
<%= f.fields_for :languages do |lang| %>
<%= lang.label :name, "Name" %><br />
<%= lang.select :name, Language.all.collect {|l| [l.name, l.id]}, prompt: 'Please select' %><br />
<%= end %>
<p><%= f.submit "Submit" %></p>
<% end %>
Try This:
<%=select_tag "language_ids[]" options_for_select([['Please select','']]+Language.all.map{|ln|[ln.name,ln.id]})%>
uses the gem, gem "cocoon"
in the form of the model you want to add the field
<div class="form-group">
<%= f.fields_for :photoproducts do |forms_fields| %>
<% render partial: "shared/photoproducts_fields", locals: {f: forms_fields} %>
<% end %>
<%= link_to_add_association('+ Foto', f, :photoproducts, type: "button", class: "btn btn-primary btn-sm") %>
</div>
(In this example, I have a product template, which I'm adding photos to)
and then create a partial in a shared folder at the root of the project.
-
project / shared / _fotoproduto_fields.html.erb
<div class="nested-fields">
<%= link_to_remove_association('remove photo', f, type: "button", class: "btn btn-danger btn-sm") %>
<div class="photoproducts">
<div class="form-group">
<label class="control-label"><%= f.label :name %></label>
<%= f.text_field :name, class: "form-control", type: "text" %>
</div>
<div class="form-group">
<label class="control-label"> photo</label>
<%= f.file_field :files, class: "form-control" %><br/><br/>
</div>
</div>
</div>
this way you get a more dynamic form
remember to put parameters in the controllers for nested attributes, and put in the create method, a build of the model.
ex: #products.photoproducts.build
I'm using mongoid, and i save the geo location info in an array field.
In my model, I have:
field :location, :type => Array
In my view, I have:
<%= f.hidden_field :location %>
And this gives the result:
<input id="foo_location" name="foo[location]" type="hidden">
What I want is like below:
<input id="foo_location_1" name="foo[location][]" type="hidden">
<input id="foo_location_2" name="foo[location][]" type="hidden">
In order for the location param to be passed back as an array, you have to explicitly define the input name for these fields:
<% #foo.location.each do |loc| %>
<%= f.hidden_field :location, :name => "foo[location][]", :value => loc %>
<% end %>
I have found the solution by setting :multiple => true, which will give the right result.
<%= f.hidden_field :location, :multiple => true, :id => "foo_location_1" %>
<%= f.hidden_field :location, :multiple => true, :id => "foo_location_2" %>