自动淡出 <%= notice %> 和/或 <%= alert %> 闪烁消息答案

【问题标题】：Auto-Fading Out <%= notice %> and/or <%= alert %> flash messages自动淡出 <%= notice %> 和/或 <%= alert %> 闪烁消息
【发布时间】：2021-10-09 00:43:24
【问题描述】：

好的，所以我按照教程使用 jQuery 使我的 rails flash alerts 淡出（第一次在 rails 中集成任何 jQuery - 我还是个初学者）。我添加了 gem 'jquery-rails'，在我的 application.js 中需要它，并且（现在）将这些行放在我的 application.html.erb 中：

<script>
  $(document).ready(function(){
    setTimeout(function() {
      $('.notice-wrapper').fadeOut("slow", function() {
        $(this).remove();
      })
    }, 4500);
  });
</script>

警报按原样显示，但不会淡出。我的检查员告诉我：

Uncaught ReferenceError: $ is not defined

根据我的研究，这可能意味着 jquery 尚未加载？所以我试着把脚本放在头上——没有改变。有任何人对此有经验吗？还是有更简单的解决方法？

感谢您的帮助！

【问题讨论】：

您使用的是什么版本的 Rails？ 'jquery-rails' gem 仅适用于旧的基于 spockets 的资产管道。在带有 Webpacker 的 Rails 6 中，您将通过 Yarn 而不是作为 gem 安装 jQuery。您还应该注意，如果您使用的是 Turbolinks，这可能仅适用于初始页面加载。
嘿，谢谢，我不知道 - 只是通过纱线添加了它。不幸的是，它仍然不适合我。我去找别的教程试试

标签： jquery ruby-on-rails

【解决方案1】：

原来它不起作用的原因是因为我需要在 environment.js 中调整 2 行。这是我默认的：

environment.plugins.prepend('Provide',new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']  }));

将包含'jquery'的行调整为：

$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',

一切正常。希望其他人觉得这很有帮助。祝你有美好的一天！

【讨论】：