Select2 is not applied to select element in rails, where do I find the missing link?

Question

Pages that helped me so far:

Expected outcome:

I get select2 to be applied to my select element. From that moment I'll start fixing things myself again.

Actual outcome:

Select2 is not applied to the select element.

Steps I've taken so far:

add it to gem, do bundle install.
add //= require select2 like this

:

//= require jquery
//= require jquery_ujs
//= require bootstrap/modal
//= require turbolinks
//= require select2
//= require_tree .

added the require select2 and require select2-bootstrap to application.css

:

*= require select2
 *= require select2-bootstrap
 *= require_tree .
 *= require_self
 */

in my name.html.erb there is:

:

<%= f.label :tag_list, "Topics" %>
<%= f.select(:tag_list, Tag.all.order(:name).collect { |a| a.name }, {}, id: "tag_list1", label:'Tags', :multiple => true)%>

I've created a Tag.rb (data gets saved to the db): class Tag < ApplicationRecord validates_presence_of :name end

now the final step (from what I understand), I apply the functionality to the element (adding the code to application.js below the //= require_tree .): $( "#dropdown" ).select2({ theme: "bootstrap" });

changed this to:

$( "#tag_list1" ).select2({ theme: "bootstrap" });

Console: Uncaught TypeError: $(...).select2 is not a function

I solve this with:

(function($){
  $(document).on('ready', function(){
      $("#tag_list1").select2({
        theme: "bootstrap",
        tags: true
      });
  });
}(jQuery));

Expected outcome:

I get select2 to be applied to my select element.

Actual outcome:

Select2 is not applied to the select element.

Please advise.

Update 1 This is the html output:

<input name="item[tag_list][]" type="hidden" value="">
<select id="tag_list1" label="Tags" multiple="multiple" name="item[tag_list][]">
  <option value="12">dev tool</option>
</select>

Check if you html follow this kind of structure https://jsfiddle.net/pwzydv67/1/ — Hackerman, Apr 09 '18 at 19:58
@Hackerman added the html snippet to update 1 in the question. I see the change in lay out in the jsfiddle you've shared when I change the id to tag_list1 in the html element. — Robert, Apr 10 '18 at 11:33
@Hackerman if I use your JS/JQuery snippet I get the error mentioned earlier `.select2 is not a function`. — Robert, Apr 10 '18 at 11:40
Have you tried restarting your server after installing the `select2` gem? — Trinculo, Apr 10 '18 at 18:44

score 0 · Accepted Answer · answered Apr 11 '18 at 13:13

Looking at the DOM. You should see the following order of loading: jQuery, select2 and then your js files. ( source: https://stackoverflow.com/a/42671121/6430382 )

Instead of ready add turbolinks:load

Make a file called /assets/javascripts/select2.js:

//= require select2-full

$(document).on('turbolinks:load', function(){
  $("#tag_list1").select2({
    theme: "bootstrap",
    tags: true,
    placeholder: "Max 5 topics"
  });
});

Expected outcome: you get select2 added to your element with all functionality.

Select2 is not applied to select element in rails, where do I find the missing link?

1 Answers1