第三方JavaScript在Rails應用程序的ruby中不起作用

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 .

在 Github存儲庫 Heroku上部署 。

為什么這不起作用？

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代碼。 應該是這樣的，以確保它將正確加載。

$(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。 該答案僅包括您所要求的內容。

順便說一句 ，您可以使用Rails Assets來幫助您更好地管理依賴關系，而不是在plugins.js中包含所有源js代碼，如果您感興趣的話，這里是OwlCarousel2的鏈接。