It's working fine in the regular view with this code:
.profile-searchbar.text-left
= form_tag(compare_path, method: 'get', remote: true, id: 'compare_form') do
= select_tag "v_friend_id", options_from_collection_for_select(#v_friends,
:id, :full_name, #comparison.v_friend.id),
:include_blank => true, :class => "compare-search"
however, in mobile view which renders on mobile (bootstrap col-xs) It will not update the selected value. It stays on the original one. If I change it in the regular view, then scale the screen down, it shows a new value, but I cannot select one with this select2 form in mobile view. It seems to only select the default value.
Here's the select2 option in my mobile view I made a separate dropdown, because the design does not allow for simply scaling down the original select2 dropdown:
= form_tag(compare_path, method: 'get', remote: true, id: 'compare_form') do
= select_tag "v_friend_id", options_from_collection_for_select(#v_friends,
:id, :full_name, #comparison.v_friend.id),
:class => "compare-searchM", :style => "width:90%; margin-left: 3px;"
here's my JS for select 2:
$('.compare_btn').on('click', function () {
$("#compare_form").submit();
});
$(".compare-search").select2({
placeholder: "Search to compare",
allowClear: true
});
$(".compare-searchM").select2({
placeholder: "Search to compare",
allowClear: true
});
Basically, it seems I'm needing 2 selct2 dropdowns / forms to control the same value.. But, I think only the original is controlling it..
Related
I am trying to implement a dropdown list in a simple_form but the collection of emails appears behind the main box. See image below:
I have already tried to play with z-index but failed. I have also tried to add some javascript code according to select2 documentation regarding common problems (https://select2.org/troubleshooting/common-problems ) and also failed.
Ruby slim code is:
.reveal id="doubt-material-#{material.id}" data-reveal=true
= simple_form_for [:student, trail, component, material, material_student, doubt], html: { id: "doubt" }, remote: true do |f|
= f.input :recipient, :collection => %w[contato#witseed.com suporte#witseed.com], label: "#{t 'students.materials.index.questions.form_send_email'}", include_blank: "#{t 'students.materials.index.questions.form_blank_line'}"
javascript:
$('#select2-doubt_recipient-container').select2({
dropdownParent: $('#doubt-material-#{material.id}')
});
Html is:
Does anyone have any idea of whats is going on ?
Thx.
What I have
I have a simple select field on a view, its not part of any form, selecting any option sends a remote request to the route.
There are a bunch of applications in a view listed in table and each application has this dropdown which user can use to assign a tag to the application. The code of this select_tag is as following.
<%= select_tag 'application_tag',
options_from_collection_for_select(HiringTag.order(:name), :id, :name, application.tag),
prompt: "Assign a tag to the application",
class: "form-control input-block-level chzn-select",
id: "hiring_tag_dropdown",
data: {
remote: true,
url: "applications/"+application.id.to_s+"/assign_tags",
method: 'post'
}
%>
Right now this works fine as it is and tag is being assigned to the application.
What I am trying to do
I am trying to convert this select_tag to multi select field using collection_select and the gem I am using is gem 'chosen-rails'. Looking at the documentation and several other blog articles it seemed like a straight forward job but I just cant get the field to appear the way it should. This is what I have done.
<%= collection_select :application_id, :application_tag, HiringTag.order(:name), :id, :name, {}, {include_blank: true, multiple: true, class: 'form-control input-block-level chzn-select'} %>
This is what the field looks like in view
and this is how i am expecting it to look like
I also added the javascript part but that did not help either
$('.chzn-select').chosen();
Question
What am i doing wrong here :)
I have implemented the functionality of adding tags to a post in Rails using chosen-rails and acts-as-taggable gems. I want to further enhance the functionality by making user to create new tag if it doesn't exist.
form.html.slim
.form-group.text-center
= f.label :tag_ids, "Tags"
= f.collection_select :tag_ids, Tag.order(:name), :id, :name, {}, {multiple: true}
I need to add a new tag if it doesn't exist.
Ok with Selectize.js, Acts_as_Taggable, & SimpleForm:
Firstly, change your input from collection_select to a normal string input. Selectize.js will separate all of the values into tags anywhere there is a comma. This happens behind the scenes so as people add tags, it's actually inserting a long string into your database with whatever delimiter you supply. Then you need to add an id to that field so you can initialize selectize such as:
<%= f.input :nationalities, as: :string, placeholder: "Nationalities", input_html: { id: 'nationality-input'} %>
Then initialize selectize.js:
#The following line gets all tags ever posted for a user with the context 'nationalities' which we will use as options.
<%=nations = ActsAsTaggleOn::Tagging.includes(:tag).where(context: 'nationalities').uniq.pluck(:id, :name)
$(document).ready(function() {
$('#nationality-input).selectize({
delimiter: ',',
persist: true,
allowEmptyOption: false,
options: [
<% nations.each do |nat| %>
{text: '<%=nat[1] %>', value: '<%=nat[1]%>' },
<% end %>
searchField: 'text',
create: function(input) {
return {
value: input,
text: input
}
}
});
});
Make sure you have acts_as_taggable setup properly and that the corresponding model includes it. Then in your controller just save the whole string with commas and all and allow selectize to reformat it on views automagically.
I currently have a list of events that I want my users to be able to filter. Each event has a performer and I store the performers id for each event.
It isn't very user friendly for my users to be able to search by the user id as it won't mean much to them so I want them to be able to search by the performers name.
I had previously created a simple search form that used select2 rails gem and the code in my view would look something like this:
<%= select_tag(:performer, options_from_collection_for_select(#performer,
:id, :profile_name, :selected => params[:performer]), :include_blank => true, id: "user", :class => "form-control") %>
<script type="text/javascript">
$(document).ready(function() {
$('select#user').select2({
allowClear: true,
placeholder: "Choose a profile name",
});
});
This would allow my users to be able to search and select a name and it would find the relevant events that related to their user_id.
I now want to use the filterrifc gem to make the search update in realtime as the user is typing and to display the results but I cannot work out how to modify my code to work alongside the gem.
If I follow the example in the documentation for a simple text search, the scope in the model would look like this:
scope :performer, lambda { |query|
where("LOWER(events.performer) LIKE ?", "%#{query}%")}
But I cannot work out how to combine the select2 gem with the filterrific gem to get the result that I want.
This seems to have done the trick.
<%= f.select :performer, options_from_collection_for_select(#performer, :profile_name,:name), {:include_blank => true}, id: "user", class: "form-control", data: { placeholder: "Choose a performer" } %>
I am using select2 gem in rails
gem version: 3.5.9.3
select2 version: 3.5.2
Haml view:
= form_tag('cards/search/', method: :get, remote: true, class: 'navbar-form navbar-right') do
.form-group
= hidden_field_tag :q, '', id: 'search', class: 'form-control',
style: 'width: 250px;',
data: { 'ajax-url' => search_path, placeholder: 'placeholder' }
In coffescript file
$ ->
$('#search').select2
minimumInputLength: 1
ajax:
dataType: 'json'
delay: 250
data: (params) ->
q: params
results: (data) ->
results: data.q
How can I add fixed item to the bottom of options? No matter what I typed in search form.
I tried:
$('#search').append{id: 'test', text: 'test'}
But didn't saw that option.
The two solutions I came up with are:
Create a decorator for select2.
Which IMO is quite a cumbersome task since there isn't really any documentation on how to do it that I've found.
The best resource I found that helped me was Kvein Brown's reply on this thread:
https://groups.google.com/forum/#!topic/select2/s4hAHyBrYqc
The other way to do it, and probably the easiest if you're just using one select2 on the page is to listen for select2's open event and then just use jQuery to append a element where you want it.