Question

我在Ruby on Rails应用程序中使用Bootstrap 4。我面临的问题是我的第三方JavaScript文件无法在我的应用中运行。第三方JS文件包含无效的轮播效果。我的application.js包含

//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require slick
//= require rails-ujs
//= require turbolinks
//= require_tree .

Deploy on Heroku，Github Repository。

为什么这不起作用？

Answer 1

根据jquery-rails gem文档，您还需要添加

//= require jquery_ujs

到你的application.js文件。试试看，看看它是否有效。

Answer 2

当我检查你的Heroku应用程序上的控制台时，看起来你的javascript代码看起来并不像我看到的那样：

Uncaught ReferenceError: WOW is not defined

您的WOW（以及plugins.js源代码所在地）也存在您的Owl Carousel代码。

在application.js文件中添加plugins.js以确保它在active.js文件之前加载。

//= require plugins
//= require_tree .

（我可能会移除require_tree并根据需要按顺序包含的内容单独包含每个文件。）

接下来，从文档中更改Owl js代码，类似于Usage部分中的代码段。它应该是这样的，以确保它将正确加载。

$(document).ready(function() {
  $(".app_screenshots_slides").owlCarousel({
    items: 1,
    loop: true,
    autoplay: true,
    smartSpeed: 800,
    margin: 30,
    center: true,
    dots: true,
    responsive: {
      0: {
        items: 1
      },
      480: {
        items: 3
      },
      992: {
        items: 5
      }
    }
  });
});

FWIW你在控制台中也有额外的错误（未加载自定义字体和其他jQuery错误）。在active.js文件中也看起来像一些未使用的JS。这个答案只包括你提出的问题。

除了在plugins.js中使用所有源js代码之外，您可以使用Rails资产来帮助您更好地管理您的依赖项，如果您感兴趣，这里是OwlCarousel2的链接。< / p>

第三方JavaScript无法在rails应用程序上使用ruby

2 个答案: