Bootstrap-tour tour.init不是一个功能

时间:2016-12-19 21:58:21

标签: javascript ruby-on-rails asset-pipeline ruby-on-rails-5 bootstrap-tour

我正在尝试让bootstrap-tour工作我使用bootstrap-rails gem在我的rails应用程序中包含bootstrap rails。

我已经看到很多其他问题已经被本地存储解决了我已经尝试过修复它并且它无处可去。我的问题与它在到达init函数时抛出错误有所不同。

TypeError: tour.init is not a function at HTMLBodyElement.ideasTour 

message
:
"tour.init is not a function"
stack
:
"TypeError: tour.init is not a function

我的cofeescript编译为匹配示例的js bootstrap tour

intros.coffee

ideasTour = ->
    console.log 'function was called'
    tour = new Tour({
        steps:[
        { 
            element: "#step1"
            title: 'Ideas'
            content: 'Ideas are the encapsulating class...' 
        }
        {
            element: "#step2"
            title: "Create a new Idea"
            content: 'lets create a new Idea, click on the add button to start.'
        }
    ],
    debug: true,
    storage: false      
    })
    console.log 'options set initializing...'
    tour.init()
    console.log 'initialized starting...'
    tour.start(true)
    console.log 'called start'

$ ->
    $('body').on('tour', ideasTour) 

我的application.js

//= require jquery
//= require jquery_ujs
//= require best_in_place
//= require bootstrap
//= require bootstrap-tour
//= require turbolinks
//= require_tree .    
$ = jQuery;

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

看起来这是一个较旧的问题,但这是因为在页面上加载了bootstrap-tour库之前尝试使用tour.init()。确保引用bootstrap-tour.js或bootstrap-tour-min.js。

虽然最好将javascript库引用放在标记正上方的页面底部,但是尝试放置库(如果你没有使用独立的bootstrap-tour,则放置jQuery库)如果你能消除这种“竞争条件”。

如果你正在使用jquery,你可以通过在其中放置tour.init()调用来利用jQuery(document).ready函数,以便它等待所有页面资源加载到DOM之前试图称之为。