I am a Rails beginner and trying to use Select2
gem in Rails application and I see it not working as expected.It is shown as normal drop down only where i am expecting search option included in it. Can some one help me please.
HTML Code
JavaScript
x
23
23
1
<tbody id="template">
2
<tr>
3
<td>
4
<%=
5
select_tag "order[order_placed][][itemname]",
6
options_from_collection_for_select(Stock.all, "item_name", "item_name"), {:class => 'form-control', :id => 'select_two', :style => "width: 180px"}
7
%>
8
9
10
</td>
11
<td><input name="order[order_placed][][quantity]" type="text" size='10' class="form-control" /></td>
12
<td><input name="order[order_placed][][unitprice]" type="text" size='10' class="form-control" /></td>
13
<td><input name="order[order_placed][][tax]" type="text" size='10' class="form-control"/></td>
14
<td><input name="order[order_placed][][discount]" type="text" size='10' class="form-control"/></td>
15
<td><input name="order[order_placed][][itemtotalprice]" type="text" size='10' class="form-control" /></td>
16
<td>
17
<button type="button" class="btn btn-default btn-sm sub" onClick="$(this).closest('tr').remove();">
18
<span class="glyphicon glyphicon-minus"></span>
19
</button>
20
</td>
21
</tr>
22
</tbody>
23
Here is my application.js
JavaScript
1
23
23
1
// This is a manifest file that'll be compiled into application.js, which will include all the files
2
// listed below.
3
//
4
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
5
// vendor/assets/javascripts directory can be referenced here using a relative path.
6
//
7
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
8
// compiled file. JavaScript code in this file should be added after the last require_* statement.
9
//
10
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
11
// about supported directives.
12
//
13
//= require rails-ujs
14
//= require jquery
15
//= require toastr
16
//= require bootstrap-sprockets
17
//= require turbolinks
18
//= require_tree .
19
20
$(document).ready(function)(){
21
$('#select_two').select2();
22
}
23
Gem file has the related gem
JavaScript
1
2
1
gem 'select2-rails'
2
Advertisement
Answer
I don’t know what this is the solution but I have worked this manually on my application after following those steps
On Gemfile
JavaScript
1
3
1
gem "select2-rails"
2
# bundle install
3
application.js
JavaScript
1
2
1
//= require select2
2
Just above this //= require_tree .
line
application.js
JavaScript
1
10
10
1
(function($){
2
"use strict";
3
$(document).on('ready', function(){
4
$("#order_place_id").select2({
5
allowClear: true,
6
theme: "bootstrap"
7
});
8
});
9
}(jQuery));
10
application.css
JavaScript
1
3
1
*= require select2
2
*= require select2-bootstrap
3
HTML Code
JavaScript
1
11
11
1
<div class="form-group">
2
<label>Place Order</label>
3
<select name="order[order_placed][][itemname]" id="order_place_id" class="form-control">
4
<% Stock.all.each do |stock| %>
5
<option value="<%= stock.item_name %>">
6
<%= stock.item_name %>
7
</option>
8
<% end %>
9
</select>
10
</div>
11
and finally, see the below image which I implemented
If you try this solution make sure restart your server after finished steps.
Hope to help