select2-rails gem is not working on Rails4

Question

I have tried given documentation for the select2-rails gem, but my browser console still throws an error.

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

I am using rails 4.0.1& select2-rails 3.5.9.3

My application.js

//= require jquery
//= require select2
//= require jquery.ui.accordion
//= require jquery.ui.menu
//= require jquery.ui.datepicker
//= require common
//= require posts
//= require twitter/bootstrap
//= require owl.carousel
//= require turbolinks
//= require vendor_js
//= require_tree .

$(document).ready(function() {
  $("select#team_select").select2();
});

application.css

*= require select2
*= require_self
*= require jquery.ui.accordion
*= require jquery.ui.menu
*= require jquery.ui.datepicker
*= require common
*= require owl.carousel
*= require lazybox
*= require fancybox
*= require owl.theme
*= require 7531339
*= require_tree .
*= require font-awesome

_form.html.erb

<%= f.select(:team_id, @teams.collect {|p| [p.name, p.id]}, {include_blank: "None"}, {id: "team_select"}) %>

What i am doing wrong here? Any help is appreciated.

Monoplegia

Have you checked if the select2.js is really loading? – Bionomics

Put tour '//require select2' after all the JQUERY plugins ? And remove the 'select' in selector of jquery => $('#team_select').select2(); – Underclothes

Answer 1

The problem is surely in application.js: According to their Demo App, the sequence of requiring JS plugins is as follows:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require select2
//= require select2_locale_pt-BR
//= require_tree .

In your case, you have to load turbolinks before select2, leading to:

//= require jquery
//= require turbolinks
//= require select2
//= require jquery.ui.accordion
//= require jquery.ui.menu
//= require jquery.ui.datepicker
//= require common
//= require posts
//= require twitter/bootstrap
//= require owl.carousel
//= require vendor_js
//= require_tree .

Corell

Answer 2

I never encountered this issue while using rails 4.1.5 & select2-rails 3.5.9.3. However, after upgrading rails to 4.2.4, I get the same exact error described in this question:

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

I was able to resolve the error by removing the "select2-rails" gem from my Gemfile and replacing it with:

source 'https://rails-assets.org' do
  gem 'rails-assets-select2', '~> 4.0.0'
end

Basal

Answer 3

On rails 5 using CoffeeScript and turbolinks I had to use the line:
$(document).on "turbolinks:load", -> before everything so that the code gets executed when the desired page with the select tag is loaded.

Lenity

Answer 4

I had the same problem and changing the order of JS plugins didn't help.

I ended up removing turbolinks and it's working now. Probably not the best solution but it was the best thing that I achieve after some hours searching.

So, basicly I removed that line from application.js file:

//= require turbolinks

Tai

Instead of removing //= require turbolinks, we can modify link_to like e.g: <%= link_to('Giraffe', @giraffe, data: { no_turbolink: true }) %> Reference – Monoplegia