2

I have a simple web page with content and bootstrap tour to guide through my web page.

I would like to trigger the tour with a button with following html code:

<button id="initiate_tour" type="button" class="btn btn-danger">Initiate Tour</button>

The JS for initiating the tour is as follows:

// Instance the tour
var tour = new Tour({
  backdrop: false, 
  storage: false        
});

tour.addSteps([
    {
        element: "#1",
        title: "title1",
        content: "content1"
    },
    {
        element: "#2",
        title: "title2",
        content: "content2"
    },
    {
        element: "#3",
        title: "title3",
        content: "content3"
    },
    {
        element: "#4",
        title: "title4",
        content: "content4"
    }

  ]);

$("#initiate_tour").click(function(){
    // Start the tour
    tour.start();

});

I am able to start the tour when I click the button Initiate Tour. When I click End Tour button the tour closes. But when I click the Initiate Tour button again the tour doesn't start.

I have refereed following posts but nothing worked:post1 and post2.

Please help me out solving this as am new to using javascript and bootstrap tour

Community
  • 1
  • 1
sravan kumar
  • 583
  • 3
  • 11
  • 24

2 Answers2

2

Now the tour is working as expected. I have enabled debug as true in bootstrap tour settings to see log in the console of browser. I got error which says "Tour ended, init prevented".

Made following change in code:

$("#initiate_tour").click(function(){
    tour.init();
    tour.restart();
});

Got the solution from following link: problem solution

sravan kumar
  • 583
  • 3
  • 11
  • 24
1

You can restart the tour using the restart() function.

http://jsfiddle.net/tejashsoni111/6hh8z5qc/1/

$("#initiate_tour").click(function(){
    // Start the tour
    if(!tour.start()){
        tour.restart();
    }
});
tejashsoni111
  • 1,405
  • 1
  • 18
  • 34
  • Thanks for ur suggestion. It works with the jsfillde example u have provided. But it doesnt work with the actual website of mine. – sravan kumar Oct 26 '16 at 13:33
  • Sorry, I had turned the debug off so could not see any errors. It says Tour ended, init prevented. – sravan kumar Oct 27 '16 at 13:54
  • As per their API documentation [http://bootstraptour.com/api/](http://bootstraptour.com/api/), if the tour ended and you want to restart it use `restart()` function. You can check that by adding one more button to restart the tour. – tejashsoni111 Oct 28 '16 at 05:05
  • This error `Tour ended, init prevented.` occur when you try to use `start()` function again. with `restart()` function it should work. – tejashsoni111 Oct 28 '16 at 05:06