让Select2 Gem与ActiveAdmin一起工作按钮

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

本文关键字：一起 工作 按钮 ActiveAdmin Select2 Gem      更新时间：2023-09-26

我有一个RubyOnRails应用程序，使用ActiveAdmin和Select2宝石。现在，我创建了一个搜索框，在输入两个字母后，会显示给定集合中的可能选项。下面是它的代码:

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

这也会在下面创建一个"添加新"按钮。当按钮被点击，一个常规的ActiveAdmin下拉菜单出现，但我希望上面创建的Select2搜索菜单显示。我该怎么做呢?

下面是user_select函数: 
$('.user_select').select2({
  minimumInputLength: 2
});

如果我单击add new按钮，那么它将创建一个新表单，保存空字段，然后刷新页面，新表单将成为我想要的Select2搜索表单。这让我认为Select2在页面加载时应用了JS和CSS，所以有可能通过AJAX或其他机制再次加载页面的那一部分吗?我不知道如何做到这一点，所以如果有人能指出我在一个资源做这样的事情，我会很感激的帮助。

我用下面的代码让它工作:

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

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

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

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

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

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

从此ActiveAdmin问题提供的解决方案

我们看到如何调用javascript/jQuery使用ActiveAdmin，一次性使用。其他答案提供了将.js文件包含到ActiveAdmin配置中的方法。

这里是一个代码片段，用于实现OP自己的解决方案与Arbre的HTML构建器语法，在ActiveAdmin中使用:

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

对于那些可能不熟悉如何在ActiveAdmin页面中实现JS作为实现所选答案的选项的人来说，这感觉很有帮助。

相关文章：