让 Select2 Gem 与 A​​ctiveAdmin“添加新”按钮一起使用

Posted 2023-05-07

【中文标题】让 Select2 Gem 与 A​​ctiveAdmin“添加新”按钮一起使用

【英文标题】：Getting Select2 Gem to work with ActiveAdmin "Add New" Button

【发布时间】：2015-10-27 02:42:07

【问题描述】：

我有一个使用 ActiveAdmin 和 Select2 Gems 的 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

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

这里是 user_select 函数：

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

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

【参考方案1】：

我最终让它与以下代码一起工作：

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

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

【参考方案2】：

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

您需要做的是将初始化程序包装在另一个函数中，该函数在您单击“添加新”按钮后被调用。我不熟悉 ActiveAdmin，但假设它只是一个添加到表单的 AJAX 请求，这样的事情应该可以工作：

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

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

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

【讨论】：

你知道如何将文件包含在 application.js 中吗？我将文件放在一个名为“searching.js”的外部文件中，并尝试添加 //= require search 。这是包含其他文件的格式（例如 //= 需要 jquery）。

只要searching.js 在app/assets/javascripts 中（application.js 在同一个文件夹中），应该可以完美运行。

是的，它在同一个文件夹中，但它看起来不像它的工作。每当任何 AJAX 请求完成时，第二个函数调用（“.ajaxComplete”）是否调用 setupSelect2 函数？

是的，就像我说的我不熟悉 ActiveAdmin，但是当您单击“添加新”时会触发一些事件。您想要捕获该事件，并在其执行结束时再次调用.select2()。我认为这是一个 AJAX 调用，但显然情况并非如此。看看您是否可以找到一些文档来了解单击按钮时实际发生的情况。

$(".button.has_many_add").click(*function goes here*)) 在按下按钮时触发。如果我将您的代码块放在里面的 setupSelect2() 中，它会返回 Uncaught query function not defined for Select2 s2id_location_location_permissions_attributes_0_user_id 。我认为$('.user_select') 部分在该区域不起作用，您知道为什么会发生此错误吗？