I'm using select2 for my laravel project:
https://select2.github.io/examples.html
And I populate my select menus like this:
{{ Form::select('category_id', ['' => ''] + $categories, null, ['id' => 'category_id', 'class' => 'select2']) }}
And my js:
$(".select2").select2({
placeholder: "Select a category"
});
But this doesn't work, the placeholder doesn't show. Any advice?
Can you include your generated html code?. I think the problem is your selector $(".select2"). The js code inside the select2 function looks ok for me. Try putting the id of the select inside the jQuery function.
So for example if your generated html code is
<select id="my_super_selector">
<option val="1">1</option>
...
</select>
You should use $('#my_super_selector'). Try it and let me know!
Cheers!
Related
I am using Rails 6 with simple form & Select2.
I have an Item model with array field "tags".
I want to add tags to items using Select2 dynamic option creation.
Problem is that I cannot type in the Select2 field. Other functions work fine.
It looks like input field is not available, so I cannot add new one. I can only select tags from list:
I would like it to work like in this example:
Dynamic option creation
Any idea what I am doing wrong?
In my form:
= f.input :tags, collection: #items.distinct('tags'),
input_html: { class: 'select-tags', multiple: true }, include_hidden: false
javascript:
document.addEventListener("turbolinks:load", () => {
$(".select-tags").select2({
tags: true
});
console.log($(".select-tags"))
});
Console output:
[Log] jQuery [<select id="item_tags">] (1) (new, line 88)
<select class="form-control select optional select-tags select2-hidden-accessible" multiple name="item[tags][]" id="item_tags" data-select2-id="item_tags" tabindex="-1" aria-hidden="true">.
<option value="tag_1">tag_1</option>
<option value="tag_2">tag_2</option>
<option value="tag_3">tag_3</option>
</select>
Currently I have this, a multi select tag, which calls the function every time something is selected/deselected. But I want the function to be called when a user clicks out of the dropdown select_tag, any ideas?
<%= select_tag ... :onchange => 'handleChange()' %>
There are a couple ways.
The best way to accomplish this is with some unobtrusive JavaScript. Add an event listener like this:
# <%= select_tag 'state' ... ' %> =>
<select name="state" id="state" multiple>
<option value="MN">Minnesota</option>
<option value="IA">Iowa</option>
<option value="WI">Wisconsin</option>
<option value="SD">South Dakota</option>
</select>
<script>
let element = document.getElementById('state');
element.addEventListener('blur', event => console.log("blur, baby, blur"));
</script>
If you prefer to use jQuery and it's already imported, you can use its event handlers. The jQuery version would go something like this:
$(document).on('blur', '#state', event => console.log('blur, baby, blur'));
Note that passing the event to your function is optional. I'm adding the event handler directly to the document which means that it would work even if the select element is dynamically added to the page after page load.
You can alternatively use this more classic jQuery approach if you are not dynamically loading the element.
$('#element-id').on('blur', function() {
// do stuff
}
I have been using the select 2 jquery plugin by including the "select2-rails" gem.
The only changes I did to make it work is to just initialise the plugin when the html page loads:
<script>
$( document ).ready(function() {
$("#e2").select2();
});
</script>
Then I assigned the e2 value to my select_tag input in the view file:
<%= select_tag :skills, options_for_select(Skill.all.collect{|e| [e.name,e.id]}, #skills), {:id => 'e2', :multiple => true } %>
When the user clicks on the input it automatically shows a drop down list with options for the user to choose from. I thought that it will be way better if the user started typing first before the drop down list would appear (as the Chrome browser).
I checked the documentation and did not find anything that would be helpful for that. I am sure there must be something I am missing. Any idea?
You can accomplish that by using the option minimumInputLength, like this:
<script>
$( document ).ready(function() {
$("#e2").select2({
minimumInputLength: 1
});
});
</script>
Hi I am stuck here pretty bad. The senario is quite simple actually, I have an input field like this:
%input.coupon_bar{:type => "text", :name=> "coupon", id=>"coupon_id"}/
And I want to pass whatever value is in that box to a different controller, I am trying to do it like this:
= link_to image_tag("ok_button.png", :border =>0), "/orders/new/", :coupon = #{$('.coupon_bar').val()}
I thought it would be simple using the jquery $('.coupon_bar').val() but I guess its not as simple as I thought... any help please????
Oh, and unlike This StackOverFlow Question, my input field is not part of any form...
Thanks in advance...
I see there two bad practices:
Don't hardcode your links
Avoid obstrusive js when possible
Here is what I suggest:
= link_to image_tag("ok_button.png", :border =>0), new_order_path, :id => "my_link"
And in your js:
<script type="text/javascript" charset="utf-8">
$().ready(function(){
$('#my_link').click(function(){
$(this).attr('href', $(this).attr('href') + '?coupon=' + $('.coupon_bar').val());
});
});
</script>
Why don't you just put it in a form? That would be much easier.
Anyway, you can use the onclick from the link to achieve your goal:
<a href="#" onclick="window.location.href = '/orders/new/coupon='+ $('.coupon_bar').val();">
Text</a>
I want to use a select menu to redirect to another page but when I select 'Home' it doesn't redirect me to the main page. Nothing happens...
<select>
<option>Select a menu</option>
<option><%= link_to 'Home', '/' %></option>
</select>
Thank you for your help.
You can't put a link inside a SELECT tag. This is a limitation of HTML, not Rails.
What you should do instead is something like this:
<%= select_tag(:menu_select, options_for_select([ 'Home', '/' ])) %>
Then you need to ensure that when the new link is selected, the page is loaded. This can be done with jQuery using something like this:
$('#menu_select').bind('change', function() { window.location.pathname = $(this).val() });
When the form selection is changed, the new URL is loaded.
The link_to helper outputs an HTML hyperlink which is not going to work when nested within an option element. You should change your options so that they have this format:
<option value="/">Home</option>
Then you could have some JavaScript that observes the onchange event of the dropdown and sets the document.location.href to the value of the selected option. This will perform the redirect.
Alternatively, you could have a Go submit button next to the dropdown that submits the form and then have Rails perform a server-side redirect to the page for the selected option using the redirect_to helper.
This will also work:
<select onChange="if(this.selectedIndex!=0) self.location=this.options[this.selectedIndex].value">
<option value="/">Home</option>
</select>