Getting Select2 Gem to work with ActiveAdmin "Add New" Button

Question

I have a RubyOnRails Application that uses the ActiveAdmin and Select2 Gems. Right now, I have made a search box that after typing two letters, shows possible options from the set given. Here is the code for that:

f.has_many :location_permissions, :allow_destroy => true, heading: 'Users With Access To This Installation' do |app_f|
  app_f.input :user,  :input_html => { :class => "user_select" }, :collection => User.all.map{ |user| ["#{user.name} (#{user.email})", user.id] }
end

This also creates an "Add New" button below. When the button is clicked, a regular ActiveAdmin dropdown menu appears, but I want the Select2 search menu created above to show up. How do I do this?

Here is the user_select function:

$('.user_select').select2({
  minimumInputLength: 2
});

If I click the add new button, so it creates a new form, save that empty field, and then refresh the page, the new form becomes the Select2 search form I want. This leads me to think that Select2 applys its JS and CSS on page load, so is it possible to load that part of the page again through AJAX or some other mechanism? I have no idea how to do so, so if anyone could point me at a resource to do something like that, I would appreciate the help.

Answer 1

I ended up getting it to work with the following code:

$(document).on('has_many_add:after', ->
  $('select.user_select').select2({
    minimumInputLength: 2
  })
)

This is in Coffeescript but the Javascript form of this is very similar, replace the "->" with function(){} . ActiveAdmin has an EventListener called has_many_add:after that is called some time after the button is clicked, and you need to execute your code after this. The code above works since the event can still bubble.

Answer 2

Yes, typically select2 is initialized at page load, which is exactly why you're seeing the behavior you described.

What you're going to need to do is wrap the initializer in another function that gets called after you click the 'Add New' button. I'm unfamiliar with ActiveAdmin, but assuming it's just an AJAX request to add to the form, something like this should work:

$( document ).ready(function() {
  setupSelect2();
});
$( document ).ajaxComplete(function() {
  setupSelect2();
});

function setupSelect2() {
  $('.user_select').select2({
    minimumInputLength: 2
  });
});

Put all of that in some external js file, include it in application.js , and see if that solves your problem.

Answer 3

from the solution provided in this ActiveAdmin issue

we see how to call javascript / jQuery using ActiveAdmin, for a one off use. Other answers provide ways to include .js files into the ActiveAdmin config.

here is a code snipit for implementing the OP's own solution with Arbre the HTML builder syntax that is used within ActiveAdmin:

script do
  raw %(
    $(document).on('has_many_add:after', () =>
      $('select.user_select').select2({
        minimumInputLength: 2
      })
    )
  )
end

This felt helpful since for those who may not be familiar with how to implement JS in ActiveAdmin pages as an option to implement the selected Answer.