无论我使用哪种顺序，Rails 5 中的引导/jQuery 加载顺序都会中断

Posted 2023-05-08

【中文标题】无论我使用哪种顺序，Rails 5 中的引导/jQuery 加载顺序都会中断

【英文标题】：Bootstrap / jQuery load order in Rails 5 breaking no matter which order I use

【发布时间】：2019-12-18 00:40:49

【问题描述】：

在我的 Rails 5 应用程序中，我们通过 Bootstrap / jQuery 使用下拉切换。问题是，无论我在 application.js 中加载 jQuery 和 Bootstrap 的顺序是什么，控制台都会输出“Bootstrap 的 javascript 需要 jQuery” - 或者 - 下拉菜单只会在点击时路由到 /#。更改加载顺序暂时解决了问题，然后它又回来了。

首先，如果我在这里遗漏了一些东西，我深表歉意。这是我在 *** 上的第一篇文章...

我们更改了 application.js 的加载顺序：

（这不会引发控制台错误，只是切换停止运行） .. //= 需要 jquery //= 需要引导 ..

到 .. （这会抛出“Bootstrap JavaScript 需要 JS 控制台中的 jQuery） //= 需要引导 //= 需要 jquery ..

多次返回

（检查以下代码，所有标签都关闭，我将它们缩写以显示共存的两个功能应该做什么）

应用程序.js ..

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require bootstrap
//= require jquery
//= require_tree .

快速编辑视图 ..

<div class="collapse" id = "quickedit-user-<%= user.id %>
    <%= render partial:users_quick_edit', locals  user: user  %>
</div>

.. 下拉导航

..

<li class="dropdown">
    <a href="#" id="dropdownMenu" class= "dropdown-toggle" data-toggle="dropdown">
         <%= current_user.username %> <b class="caret"></b> 
     </a>
     <ul class="dropdown-menu">
          <li><%= link_to "Profile", current_user %></li>

..

正确加载资产的结果应该是不仅下拉菜单的切换可以正常工作，而且“快速编辑表单”也应该正常工作。我们没有看到这一点，因为它们在任何一种设置中都会中断。

【参考方案1】：

这个问题的答案与布局中的 turbolinks 包含标签有关。默认情况下，它设置为 true，因此禁用它：

<%= javascript_include_tag 'application', 'data-turbolinks-eval' => false %>

修复了我们遇到的问题。

【参考方案2】：

你不应该在引导之前需要 jquery 吗？在 application.js...

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery
//= require bootstrap
//= require_tree .

【讨论】：

如果您阅读了最初的问题的全部内容，我会解决这个问题。

【参考方案3】：

我在 web 上遇到了同样的问题（下拉菜单没有功能，console.log 中有大量错误），我通过按其他顺序加载所有内容来解决（不确定是否在 Rails 中工作导致我不使用它）。 （ps。第二种尝试方法：如果你不使用 jquery 效果，那么就像替代方法一样，zepto.js 中也有相同的 jquery 功能）

我在网络开发中使用这个：

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.5.1.min.js"></script>

所以我从该文件夹将它们本地加载到服务器上，并使用捆绑包原因包含 popper。并将它们按顺序排列，我再也没有任何错误。 不确定是否适用于您的类似情况