Bootstrap-Tour Standalone Not Working

Question

I am trying to implement a test of Bootstrap-tour in order to become familiar with it and I cannot even get the basic example on their site to work.

I took the example off the site and am including all the appropriate files but I get nothing. No errors in the console, nothing.

Here is a live demo of the code below. http://connormckelvey.com/test/test.html

Here is my code:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
    <link href="tour/css/bootstrap-tour-standalone.min.css" rel="stylesheet">
    <script src="tour/js/bootstrap-tour-standalone.min.js"></script>

    <script>
    // Instance the tour
    var tour = new Tour({
      steps: [
      {
        element: "#test",
        title: "Title of my step",
        content: "Content of my step"
      },
      {
        element: "#test1",
        title: "Title of my step",
        content: "Content of my step"
      }
    ]
    });

    // Initialize the tour
    tour.init();

    // Start the tour
    tour.start();
    </script>
    <style>
        div {
            margin: 20px auto;
            width: 500px;
            padding: 50px;
            background: #EBEBEB;
        }
    </style>
</head>
<body>
    <div id="test">
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
    </div>

    <div id="test1">
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
    </div>
</body>

I am very confused as such things like this are so simple to troubleshoot using the console, but without any feedback, I don't know where to begin.

score 3 · Accepted Answer · edited Jul 30 '15 at 18:38

3

Running your script in the console results it it running (though you have layout issues). You probably need to wrap your tour script in document.ready so it waits for the DOM to be available:

$(document).ready(function() { ... })

or the shorthand

$(function() { ... });

You could also move it to the bottom of the page, just ahead of </body>.

edited Jul 30 '15 at 18:38

Nate Parsons

14,431
13
51
67

answered Mar 11 '14 at 17:51

isherwood

58,414
16
114
157

Wow, I don't know I didn't add that to begin with. That fixed it. Still surprised I didn't get some sort of '$ is undefined' error in the console though. – Connor Finn McKelvey Mar 11 '14 at 19:56
2

`$` is defined at that point. The DOM isn't. jQuery handles that silently. – isherwood Mar 11 '14 at 19:57
1

I am running into similar issues. However, there are no DOM loading issues here because I am calling tour building, init and start methods in an onclick function. There are no javascript errors of any type but the tour does not start. Still trying to figure out why. I have checked and rechecked, there seem to be no mistake in the code. – Allen King Jul 14 '14 at 05:20
1

Allen, onclick functions must be wrapped in document.ready as well. The event handler cannot be attached if the element isn't present when the script runs. For further help, please open your own question. – isherwood Jul 14 '14 at 13:19

Bootstrap-Tour Standalone Not Working

1 Answers1