JavaScript 在 Rails 5 应用程序中不起作用

Posted

技术标签:

【中文标题】JavaScript 在 Rails 5 应用程序中不起作用【英文标题】:JavaScript not working in rails 5 app 【发布时间】:2018-06-09 02:06:37 【问题描述】:

我想使用静态 javascript 文件而不使用我的 rails 应用程序中的 gem。我的application.js 看起来像这样

//= require jquery
//= require bootstrap
//= require owl-carousel
//= require rails-ujs

我必须在 javascript 文件夹中添加所有 Js 文件,而无需使用资产管道使用任何 gem。 The final output that i want。但在我的 Rails 应用程序 javascript is not working or not loading 中。我的application.css.scss 看起来像这样:

@import "bootstrap";
@import "style";
@import "owl-carousel";

还有index.html.erb的代码

<div class="app_screenshots_slides owl-carousel">
    <div class="single-shot">
        <%=image_tag("scr-img/1.png", alt: "")%>
    </div>
    <div class="single-shot">
        <%=image_tag("scr-img/2.png", alt: "")%>
    </div>
    <div class="single-shot">
        <%=image_tag("scr-img/3.png", alt: "")%>
    </div>
    <div class="single-shot">
        <%=image_tag("scr-img/4.png", alt: "")%>
    </div>
    <div class="single-shot">
        <%=image_tag("scr-img/1.png", alt: "")%>
    </div>
    <div class="single-shot">
        <%=image_tag("scr-img/3.png", alt: "")%>
    </div>
</div>

【问题讨论】:

javascript 无法加载。所以检查控制台是否有错误。然后设置一个断点,因为您没有包含有关此问题的代码 你的application.html.erb 是否包含 javascript_include_tag 'application' 是的,我已经包含了这个 这里是我的 Github repo 和 issue github.com/asdimalix/javascript-test/issues/1的链接 【参考方案1】:

您的所有 javascript 都已实际加载,但问题是您没有初始化 owl carousel 插件。只需添加

$(document).ready(function () 
    $(".owl-carousel").owlCarousel();
);

在您的home/index.html.erb 的底部或相关的 js 文件中以使其工作。

编辑 - 修复您当前的设置 问题是您的插件在加载实际 html 之前已初始化。可能的修复是1.change

    (function ($) 
    'use strict';


// :: 1.0 Owl Carousel Active Code
    if ($.fn.owlCarousel) 
        $(".welcome_slides").owlCarousel(
            items: 1,
            loop: true,
            autoplay: true,
            smartSpeed: 1500,
            nav: true,
            navText: ["<i class='pe-7s-angle-left'</i>", "<i class='pe-7s-angle-right'</i>"]
        );
        $(".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
                
            
        );
    

)(jQuery)

; 在assets/javascripts/owl-carousel.js

    $(document).ready(function () 

    if ($.fn.owlCarousel) 
        $(".welcome_slides").owlCarousel(
            items: 1,
            loop: true,
            autoplay: true,
            smartSpeed: 1500,
            nav: true,
            navText: ["<i class='pe-7s-angle-left'</i>", "<i class='pe-7s-angle-right'</i>"]
        );
        $(".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
                
            
        );
    

);

2. 将javascript_include_tag 中的application.html.erb 移动到页面底部,就在&lt;/body&gt; 之前 3. 将 owl carousel 初始化脚本从 owl-carousel.js 移动到您的 home/index.html.erb 希望这会有所帮助。

【讨论】:

我也在我的 owl carousel js 文件的底部初始化...像这样 见这里github.com/asdimalix/javascript-test/blob/master/app/assets/… 不客气,如果你能接受答案,如果它有帮助,那就太好了。@devdap 只需单击左侧投票图标下方的复选标记。 i.stack.imgur.com/uqJeW.png【参考方案2】:

rails-ujs,在 Rails 5 中引入,不是为了使用 jQuery——它是为了摆脱对 jQuery 的依赖而开发的。

见我的detailed answer

【讨论】:

以上是关于JavaScript 在 Rails 5 应用程序中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

stylesheet_pack_tag 在带有 webpacker gem 的 rails 5.1 中找不到 app/javascript/src/application.css

Rails 应用程序中的 Javascript 或 jquery

Rails 5 - Ajax 刷新后重新初始化 Javascript?

Rails 5/6:如何在 webpacker 中包含 JS 函数?

Bootstrap (5) Javascript 在 package.json 修订后不起作用 (Ruby on Rails 6)

我试图通过Webpack将Quilljs添加到Rails 5.1应用程序中