1

I am trying to get bootstrap-tour to work Im using the bootstrap-rails gem to include bootstrap rails in my rails application.

I have seen A lot of other questions that are solved by the local storage being cleared I already have attempted that fix and it led nowhere. My issue is different its throwing an error when it reaches the init function.

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

my cofeescript is compiles to js that matches the examples on 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) 

my application.js

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

Any help is greatly appreciated.

mkrinblk
  • 896
  • 9
  • 21

1 Answers1

0

It looks like this is an older question however this is caused by attempting to use tour.init() before the bootstrap-tour library has been loaded on the page. Ensure the reference to the bootstrap-tour.js or bootstrap-tour-min.js.

Although it is good practice to place javascript library references at the bottom of the page right above the tag, try placing the library (and jQuery library if you're not using the standalone bootstrap-tour) in the to see if you can eliminate this 'race-condition'.

If you are using jquery, you can take advantage of the jQuery(document).ready function by placing your tour.init() call inside it so that it waits for all the page resources to be loaded into the DOM before it attempts to call it.

Easton James Harvey
  • 1,672
  • 1
  • 14
  • 24