How to use Bootstrap Multiselect in Rails views? - ruby-on-rails

I am trying to implement bootstrap multiselect field in my rails app.
Making use of the bootstrap-multiselect_rails gem found here (https://github.com/TrevorS/bootstrap-multiselect_rails)
Have it installed and configured successfully but in my form am not able to select multiple vales. It allows me to select only an single value.
Right now my code looks like this:
<%= f.collection_select :role_pm, User.where(:user_role => 'Project Manager'), :name, :name, {}, {:multiple => 'true'}, {class: "role_pm"} %>
Where am I going wrong?

Finally got this working. I have Update the line of code in this answer which has caused me a lot of agony over the past 2 days or so
<%= f.collection_select :role_pm, User.where(:user_role => 'Project Manager'), :name, :name, {}, :multiple => 'true', :class => 'role_pm' %>
Looks like I have passed both multiple and class attributes as seperate arrays which was really not needed in the first place.

.You need to initialize Multiselect using the js.
here comes my working code:-
###HTML FILE
##my controller has #event_types to autopopulate the values as well for edit action
<label for="events" class="control-label form-group col-md-12">Event Type: </label>
<div class="form_group col-md-12">
<div class="btn-group">
<%= select_tag("event_types", options_for_select(#event_types.pluck(:name),:multiple=>true,:required=>true) %>
</div>
</div>
###js FILE-initialise using id/class for multiselect
$('#event_types').multiselect({
enableFiltering: true,
filterBehavior: 'text',
enableCaseInsensitiveFiltering: true,
nonSelectedText: 'Select the type of events'
});
you can use selected attribute in select tag to select those values during edit action.Just pass it from controller..example
:selected => #event_types.new_record? ? nil : #event_types.pluck(:name)
rewriting your query...
<%= select_tag("event_types", options_for_select(#event_types.pluck(:name),:multiple=>true,:required=>true) %>
changes to :Showing names in select dropdown list
<%= select_tag("role_pm", options_for_select(User.where(:user_role => 'Project Manager').pluck(:name).uniq,:multiple=>true,:required=>true) %>

Related

rails multiple checkboxes in 1 db column. saves correctly but doesn't show as checked

Event saves the section id's in an array. But in the /events/1/edit view for a newly created event, the expected checkboxes are not checked. I'm guessing because the default for checkbox values is booleans.
Event.last.newsletters #=> ["108", "115", "116", "117", "118", ""]
I have a CRUD for Event. Each Event can belong to multiple Sections. I have this displayed as a collection of checkboxes with the simpleform gem.
<%= simple_form_for #event do |f| %>
...
<%= f.collection_check_boxes :newsletters, Section.all, :id, :name, :input_html => { :class => 'checkbox' } %>
This results in the following html:
<span><input id="event_newsletters_1" name="event[newsletters][]" type="checkbox" value="1" /><label class="collection_check_boxes" for="event_newsletters_1">Newsletter 1</label></span>
<span><input id="event_newsletters_2" name="event[newsletters][]" type="checkbox" value="2" /><label class="collection_check_boxes" for="event_newsletters_2">Newsletter 2</label></span>
etc. etc.
When I create a new event or edit an event, the newsletter values are saved properly in the model.
Try specify the param :checked:
<%= f.collection_check_boxes :newsletters,
Section.all,
:id,
:name,
:input_html => { :class => 'checkbox' },
:checked => #event.newsletters %>
Reference: how to preselect an association checkbox using simple_form
If you are using SimpleForm you can use this:
<%= f.input :newsletters, collection: Section.all, as: :check_boxes %>

How to add class attribute to select tag in rails 3

I want to add class attribute to select tag in rails 3
my code is
<div >
<%= f.label :type %><br />
<%= f.select "type_id", options_from_collection_for_select(#type,
"type_id","name"),:include_blank=>true%>
</div>
My problem is that I want to add one specific class name to this select tag for validation purpose.
I tried adding
:class=>"myclassname"
but it not worked for me.plz resolve my issue
You can add class attribute like this. Check select
<%= f.select "type_id",
options_from_collection_for_select(#type, "type_id","name"),
{ :include_blank => true },
{ :class => 'myclassname' } %>

Rails 3: Changing input box length

Using Rails 3 with Twitter Bootstrap and Simple_form, I am having issues changing the length of the input box in this field:
<div class="input-prepend input-append">
<%= f.input :price, :wrapper => :append do %>
<span class="add-on">$</span>
<%= f.input_field :price %>
<span class="add-on">.00</span>
<% end %>
</div>
Others say to add this after the :price variable:
:input_html => {:size => 15}
The 'do' loop seems to change the rules, any suggestions?
try
:style => "width: 100px;"
Twitter bootstrap has css classes for this. Depending on what size you want you can add class input-min, input-small, input-large and so on. You can also use the span classes, e.g. span1, span2, etc.
<div class="input-prepend input-append">
<%= f.input :price, :wrapper => :append do %>
<span class="add-on">$</span>
<%= f.input_field :price, :class => 'input-medium' %>
<span class="add-on">.00</span>
<% end %>
</div>
I am using the f.input form to create controls with labels in a :class => 'form-horizontal' form, using a class attribute or style attribute (directly or as a hash, any way I tried) didn't work for me, and had zero effect on the generated HTML.
This is what worked for me:
<%= f.input :description, input_html: { class: 'span12' } %>
This works with both the Bootstrap column layout classes ('span1', 'span2', etc,) the input sizing classes ('input-large', 'input-xxlarge', etc,) or whatever custom class you want. The trick is using the input_html key. You can also mess with the label using the label_html key but that's likely to mess up the form-horizontal layout.
It looks like the size key in :input_html => {**:size** => 15} is ignored by SimpleForm... when I tired this it did not affect the HTML output.
I found this here in the SimpleForm docs:
https://github.com/plataformatec/simple_form#usage

display previously selected choices in multiple select form (rails)

I've built a multi-select form (from within form_for) like this:
<div class="rounded-block quarter-wide radio-group">
<h4>Exclude customers from source:</h4>
<%= f.select :excluded_sources, options_for_select(User.select(:source).group(:source).order(:source).map {|u| [u.source,u.source]}), {:include_blank => false}, {:multiple => true} %>
<%= f.error_message_on :excluded_sources %>
</div>
this works well for what I need. The only problem is that when i go back to the page that displays the choices, I don't see what was previously selected (i.e. what is already in the DB at time of rendering). Is there an easy way to get rails to display what's previously been selected? I'd MUCH prefer not to switch to check boxes.
in my matching profiles model (corresponding to the table that stores excluded_sources), i have this:
serialize :excluded_sources
this ended up being the relevant piece:
:selected => matching_profile.send(:excluded_sources)
here:
<div class="rounded-block quarter-wide radio-group">
<h4>Exclude customers from source:</h4>
<%= f.select :excluded_sources, options_for_select(User.select(:source).group(:source).order(:source).map {|u| [u.source,u.source]}, :selected => matching_profile.send(:excluded_sources)), {:include_blank => false}, {:multiple => true} %>
<%= f.error_message_on :excluded_sources %>

Cant make form date_select hidden in rails

I am trying to create a form which loads upon a user clicking a date in a calendar, the form then is passed the date that is clicked through the URL and the controller assigns that date to the #date variable. I then create a date_select element and assign it the #date variable. This works fine but since I do not want the user to be able to edit the date in the form I want it to be hidden.
I pass these html options to the form but it doesn't seem to ever effect the HTML:
<%= f.date_select :date, :default => #date, :type => "hidden" %>
Am I missing something? I also tried passing it in an HTML hash :html => { :type = "hidden" } but that doesn't work either. Even when I try something different like :class => "something" it doesn't change the HTML. Is there something special about the date_select helper?
date_select accepts the options discard_day, discard_month and discard_year to do exactly what you are trying to achieve.
<%= f.date_select :date, { :discard_day => true, :discard_month => true, :discard_year => true } %>
Behind the scenes, it generates the following HTML code:
<input id="record_date_3i" name="record[date(3i)]" type="hidden" value="5" />
<input id="record_date_2i" name="record[date(2i)]" type="hidden" value="1" />
<input id="record_date_1i" name="record[date(1i)]" type="hidden" value="2012" />
No CSS tricks, no changes in your controllers.
Per the name, date_select generates <select> elements. In no version of (X)HTML does the select element support the type attribute. If you want a hidden form field then you should use the hidden_field helper, which generates <input type="hidden"> elements.
(To answer your implied question about using e.g. :class => 'something', the problem is that the options and html_arguments parameters must be two separate hashes, but if you do something like this:
<%= f.date_select :date, :default => #date, :class => 'something' %>
..the Ruby interpreter assumes that you have supplied a single hash, i.e. { :default => #date, :class => 'something' } (and really, can you blame it?), and since class isn't a valid key for the options hash it's ignored. Instead you have to make it obvious to Ruby that these are two separate parameters by doing something like this instead:
<%= f.date_select :date, :default => #date, { :class => 'something' } %>
<%# Hey Ruby, this is a different Hash! ----^ %>
See the difference? Of course you could go bonkers and be really obvious, e.g.:
<%= f.date_select(:date, { :default => #date }, { :class => 'something' }) %>
..but that's ugly and egregious so don't bother.)
You can put it inside a hidden div:
<div style="display: none;">
<%= f.date_select :date, :default => #date, :type => "hidden" %>
</div>
That will allow you to have all the fields and hidden you can also use for date and time select:
<div style="display: none;">
<%= f.datetime_select :date, :default => #date, :type => "hidden" %>
</div>

Resources