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.
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.
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..
I've got an issue with Rails. I want a select form which render a partial view when clicked. I want the partial views to be effective without refreshing the whole document (Ajax) but it seems that remote: true does not work for me...
What I have currently and refresh the whole document:
= form_tag url_for(action: :index), method: 'get' do
//Storing some informations in html fields for further use
- shops_array = #shops.collect.with_index { |shop, i| [shop.title, shop.id, {'address' => [shop.address, shop.zipcode, shop.city].join(" ")}, {'id' => 'shop'+String(i)}] }
= select_tag :shop_id, options_for_select(shops_array, #shop_id), prompt: "Your shop :", data: {submit_on_change: true}
What I've tried :
= form_tag url_for(action: :index), remote: true, method: 'get' do
//Storing some informations in html fields for further use
- shops_array = #shops.collect.with_index { |shop, i| [shop.title, shop.id, {'address' => [shop.address, shop.zipcode, shop.city].join(" ")}, {'id' => 'shop'+String(i)}] }
= select_tag :shop_id, options_for_select(shops_array, #shop_id), prompt: "Your shop :", data: {submit_on_change: true}
How do I apply the remote: true option with url_for? If not possible, I could use some help finding a workaround.
As per the docs you can specify the remote option to the form_tag method, like so:
form_tag(url_for(controller: :charmander, action: :ember), remote: true, method: :get, class: 'pokemon-form') do
# form logic
end
However, this will only trigger the ajax:success event when the whole form is submitted.
From your question it seems to me that you want to re-render some partial when your select value changes. I'm not sure how you use the submit_on_change data attribute, but if I'm correct in assuming that you make it submit the entire form when the select vaule changes then all you need to do is listen for the ajax:success event for the entire form, like so:
$('.pokemon-form').on('ajax:success', function (event, data, status, xhr) {
// Do something with data, which would be the rendered partial returned
// from the server call.
});
Ended up using an onclick and a JavaScript function. Though it may not be the best solution nor the prettier, it works like a charm for me.
= select_tag :shop_id, options_for_select(shops_array, #shop_id), prompt: "Your shop :", onclick: 'ajaxSelectedShop('+String(8)+')'
I am using tinymce-rails gem for Tinymce and I want to add custom menu option. Right now I am doing what is suggested in the readme of gem like:
<%= f.input :content , :label => false , :placeholder => 'Content', input_html: {class: "tinymce"} %>
<%= tinymce %>
I am using simple-form.
I want to add a drop-down in the editor with a bunch of options (I have an array of names) and when user clicks on an option then the selected name should be inserted in the view of editor. And those names will be dynamic.
I tried to pass many options to the initialiser tinymce but unable to get the result.
Rather than using the default initiator from the gem you could initiate tinymce manually and create the menu item at the same time:
http://www.tinymce.com/tryit/menuitem.php
Something like this:
<script type="text/javascript">
tinymce.init({
selector: '.my-class textarea',
toolbar: "styleselect | bold italic | mybutton",
setup: function(editor) {
<% #my_items.each_with_index do |name, index| %>
editor.addMenuItem('<%= name %>', {
text: '<%= name %>',
context: 'tools',
onclick: function() {
editor.insertContent('<%= name %>');
}
<%= index == (#my_items.count - 1) ? '});' : '}),' %>
< % end %>
});
</script>
We use a ternary operator to choose the correct closing tag based on the index of the names.
Theoretically you can also do this in the config/tinymce.yml file, but due to the dynamic nature it's not really plausible.
Something else you may want to look into is passing the menu to the activeEditor like:
tinyMCE.activeEditor.controlManager.get('my_menu')
Im knew on MVC and on Ruby on rail environment
I have this code
<%= select :language, :language_id,
options_for_select([ "Arabic", "English"]),
{:prompt => "#{t('language')}"},
{:onChange => "#{remote_function(:url => {:controller => 'ConfigurationController',:action => "change_language"}
)}"} %>
And I cant make the Select to call this action and make PostBack for the page on on change
after selected index change nothing is happening ?
Since this is a remote function call. can you see in browser's console if there are any errors returned from server.
the syntax of select_tag, you are using looks fine.
Edit:
did u try alerting some thing onchange event? refer this syntax
<%= select_tag "language", options_from_collection_for_select(#collection,'value','name'), html_options = { :onChange=> "alert('');" :style=> "display:block;" } %>
where u can create your collection using,
#collection = ["en","ab"]
#collection = #collection.map { |name, value| OpenStruct.new(:value => name, :name => name) }
What version of Rails are you using? It looks like remote_function was depracated in 3.1 http://apidock.com/rails/ActionView/Helpers/PrototypeHelper/remote_function
Use jQuery to respond to the change event:
jQuery ->
$("#select_id").change ->
$.ajax(
url: "url",
dataType: "json",
data: "data to send")
.done (data) ->
do_something_on_success()
.fail (data) ->
do_something_on_fail()