让 Select2 Gem 与 ActiveAdmin "Add New" 按钮一起工作

Question

我有一个使用 ActiveAdmin 和 Select2 Gem 的 RubyOnRails 应用程序。现在，我制作了一个搜索框，在输入两个字母后，它会显示给定集合中的可能选项。这是相关代码：

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

这还会在下面创建一个 "Add New" 按钮。单击该按钮时，会出现一个常规的 ActiveAdmin 下拉菜单，但我希望显示上面创建的 Select2 搜索菜单。我该怎么做？

这里是 user_select 函数：

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

如果我单击添加新按钮，它会创建一个新表单，保存该空字段，然后刷新页面，新表单将成为我想要的 Select2 搜索表单。这让我想到 Select2 在页面加载时应用了它的 JS 和 CSS，那么是否可以通过 AJAX 或其他机制再次加载页面的那部分？我不知道该怎么做，所以如果有人能指出我的资源来做类似的事情，我将不胜感激。

Answer 1

是的，select2 通常在页面加载时初始化，这正是您看到所描述行为的原因。

您需要做的是将初始化器包装在另一个函数中，该函数在您单击 'Add New' 按钮后被调用。我不熟悉 ActiveAdmin，但假设它只是一个 AJAX 添加到表单的请求，这样的事情应该有效：

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

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

将所有这些放在一些外部 js 文件中，将其包含在 application.js 中，看看是否能解决您的问题。

Answer 2

我最终使用以下代码让它工作：

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

这是在 Coffeescript 中，但它的 Javascript 形式非常相似，将“->”替换为 function(){} 。 ActiveAdmin 有一个名为 has_many_add:after 的 EventListener，它会在单击按钮后的某个时间调用，您需要在此之后执行您的代码。上面的代码有效，因为事件仍然可以冒泡。

让 Select2 Gem 与 ActiveAdmin "Add New" 按钮一起工作

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

javascript

jquery

ruby-on-rails

activeadmin

jquery-select2