Bootstrap tour stop working after changing path

Question

Please help me to continue bootstrap tour after changing page. This is my code for page1.html

<body>
<div>
Page 1
   <a class="btn btn-default"> Start the Tour </a>

                <br/>

        <span id="element1">First Element </span>


        <br/><br/><br/><br/><br/><br/><br/><br/><br/>

        <span id="element2">Second Element</span>

        <br/><br/><br/><br/><br/><br/><br/><br/><br/>

        <span id="element3">Third Element</span>

<br/><br/><br/>
</div>
        <a href="https://google.com"> Google.com </a>

</body>


<script type="text/javascript">
var tour1 = new Tour({
    orphan:false,
    debug:true,
    backdrop:true,
    orphan:true,
    keyboard:true,
    name:'tour1',
  steps: [
        {
            path:"",
            element: "#element1",
            title: "Title of my step 1",
            content: "Content of 1"
        },
        {
            path:"",
            element: "#element2",
            title: "Title of my step 2",
            content: "Content of 2"
        },
        {
            path:"",
            element: "#element3",
            title: "Title of my step 3",
            content: "Content of 3"
        },
        {
            path:"page2.html",
            element: "#element4",
            title: "Manage People",
            content: "This is the Manage People title page"
        }
]});

// Initialize the tour
tour1.init();

// Start the tour
tour1.start();
    </script>

This is page2.html

<body>
Page 2

                <br/>

        <span id="element4">Fourth Element </span>


        <br/><br/><br/><br/><br/><br/><br/><br/><br/>

        <span id="element5">Fifth Element</span>

        <br/><br/><br/><br/><br/><br/><br/><br/><br/>

        <span id="element6">Sixth Element</span>


</body>
<script type="text/javascript">
var tour1 = new Tour({
    orphan:false,
    debug:true,
    backdrop:true,
    orphan:true,
    keyboard:true,
    name:'tour1',
  steps: [
        {
            path:"",
            element: "#element1",
            title: "Title of my step 1",
            content: "Content of 1"
        },
        {
            path:"",
            element: "#element2",
            title: "Title of my step 2",
            content: "Content of 2"
        },
        {
            path:"",
            element: "#element3",
            title: "Title of my step 3",
            content: "Content of 3"
        },
        {
            path:"page2.html",
            element: "#element4",
            title: "Manage People",
            content: "This is the Manage People title page"
        }
]});

// Initialize the tour
tour1.init();

// Start the tour
tour1.start();
</script>

After step 4, bootstrap tour redirects to page 2 but the popover disappeared and the tour stopped. I have tried to change the path, but can not solve anything. Anyone experienced with bootstrap tour please help, thank you

Please do not use "bootstrap" tag, use "twitter-bootstrap" since it means something else — Daniel Cheung, Oct 12 '14 at 10:02

score 0 · Answer 1 · answered Oct 08 '14 at 13:08

0

You have 2 paths in you last step:

{ 
        path:"page2.html",
        element: "#element4",
        path:"page2.html",  
        title: "Manage People",
        content: "This is the Manage People title page"
    }

Should be this:

{
        path:"page2.html",
        element: "#element4",
        title: "Manage People",
        content: "This is the Manage People title page"
    }

answered Oct 08 '14 at 13:08

Macsupport

5,406
4
29
45

Sorry, in my code I've delete the redundant path but when the page is on the same path at the step, ex: step 4 and page2.html. It's an infinite redirecting loop, it's just redirect to page2.html over and over, maybe it's not realize the step is on the right path? – user1073045 Oct 09 '14 at 02:06
"tour.restart();' should be 'tour.start();' – Macsupport Oct 09 '14 at 02:22
I've just edited my code,already changed it to start(), in Chrome it loops when on page 2 step 4, in firefox it does nothing. – user1073045 Oct 09 '14 at 02:53
Not enough info in your post to solve it. You need to post more code, a jsfiddle or a link. – Macsupport Oct 09 '14 at 04:12

Bootstrap tour stop working after changing path

1 Answers1