Select2-rails is not working with ActiveAdmin

Question

I have difficulties integrating select2-rails with ActiveAdmin. I followed setup steps on Select2-rails Github page: https://github.com/argerim/select2-rails and I added line:

//= require select2

to app/assets/javascripts/application.js and line:

*= require select2

to app/assets/stylesheets/application.css

so I assume when I have page in ActiveAdmin I should be able to add line:

$('#add_student_select').select2() 

to active_admin.js.coffee

But its not working. In console I can see following error:

Uncaught TypeError: undefined is not a function
(anonymous function)
fire
self.fireWith
jQuery.extend.ready
completed

I also followed this StackOverflow question which recommends to add this line to active_admin.css.scss:

body.active_admin {
  @import "select2";
}

But then I get following error:

File to import not found or unreadable: select2.

Do I integrate it correctly? I don't think that ActiveAdmin is able to get even access to the librabry.

Answer 1

If you're adding Select2 to the ActiveAdmin interface, you must add the javascript and styles to the ActiveAdmin assets:

# app/assets/javascripts/active_admin.js.coffee
#
#= require select2
#
# ...

And the stylesheets:

// app/assets/stylesheets/active_admin.css.scss
//
//= require select2
//
// ...

In the example you provided, Select2 would be available to the main Rails application, but not ActiveAdmin. ActiveAdmin uses its own javascript and stylesheet files.

Answer 2

I had met the same issue making select2 work with activeadmin, but instead I used a gem named activeadmin-select2. I had installed it according to the README, but I still got error "File to import not found or unreadable: select2.". It seems like that select2-rails had not been installed or not be accessible, however. So then I tried to add select2-rails to my Gemfile, and bundle, lastly, everything went well. You should checked your gem loading before you can make it work.