javascriptruby-on-railsselect2-rails

select2-rails gem is not working on Rails4


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.


Solution

  • 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 .