Starting Bootstrap tour with a button after ending

Question

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

Answer 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();
    }
});

Answer 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