Twitter Bootstrap Question posted in

Twitter bootstrap – 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.

Tags:

4

Answers


  1. 0

    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 .
    Login or Signup to reply.
  2. 0

    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
    Login or Signup to reply.
  3. 0

    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
    Login or Signup to reply.
  4. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search