Hydrid Hydrid -3 years ago 122
Javascript Question

Bootstrap Tour - Initialising two tour in one page

I'm posting here because I can't find a solution to my problem in the official documentation of Boostrap Tour or in any other topic here.

Here is my problem :
I have one page in which I want to initialize two tours in order to give the choice to my user to choose which one start. They are started by a function "StartTour" called by an "onClick" call.

If I declare and initialize my two tours in the same page, when I run the 1st one, on the 3rd step, it switches to the 2nd step of the second tour. The second tour works perfectly when I run it.

My actual code look like this (I will only include the relevant parts) :

var tour1
var tour2
[...]
// Bootstrap tour

//Create tour1
tour1 = new Tour({
storage: window.localStorage,
debug: true,
//add steps
steps: [
{
path:"/base/show/1",
element: "#home",
title: "{{ 'tuto11 title' | trans }}",
content: "{{ 'tuto11 desc' | trans }}",
placement: "right"
},
{
path:"/base/show/1",
element: ".mce-item-table",
placement: "top",
title: "{{ 'tuto12 title' | trans }}",
content: "{{ 'tuto12 desc' | trans }}"
},
{
path:"/base/show/2124",
element: ".titlepage",
title: "{{ 'tuto13 title' | trans }}",
content: "{{ 'tuto13 desc' | trans }}",
placement: "top"
},
{
path: "/base/show/2566",
element: ".titlepage",
title: "{{ 'tuto14 title' | trans }}",
content: "{{ 'tuto14 desc' | trans }}",
placement: "top"
},
{
path: "/base/show/1093",
element: ".titlepage",
title: "{{ 'tuto15 title' | trans }}",
content: "{{ 'tuto15 desc' | trans }}",
placement: "top"
},
{
path: "/base/show/1093",
element: "h2", //h2 = pas bon
title:"{{ 'tuto16 title' | trans }}",
content:"{{ 'tuto16 desc' | trans }}",
placement:"top"
}
]
});

//Initialize the tour
//tour1.init();

//Create tour2
{% if app.user %}
tour2=new Tour({
storage: window.sessionStorage,
debug: true,
//add steps
steps: [
{
path: "/base/show/1",
element: "#icProfil",
title:"{{ 'tuto21 title' | trans }}",
content:"{{ 'tuto21 desc' | trans }}",
placement:"bottom"
},
{
path: "/member/show/{{ app.user.getId()}}",
element: ".titlepage",
title:"{{ 'tuto22 title' | trans }}",
content:"{{ 'tuto22 desc' | trans }}",
placement: "top"
},
{
path: "/member/show/{{ app.user.getId() }}",
element: ".fa-icon-pencil",
placement: "bottom",
title:"{{ 'tuto23 title' | trans }}",
content:"{{ 'tuto23 desc' | trans }}"

},
{
path: "/member/edit/{{ app.user.getId() }}#civil",
element: "#idn1",
placement: "left",
title: "{{ 'tuto24 title' | trans }}",
content: "{{ 'tuto24 desc' | trans }}"
},
{
path: "/member/edit/{{ app.user.getId() }}#social",
element: "#idn2",
placement: "left",
title: "test",
content: "test"
}
]
});

tour2.init();
{% endif %}

})

//Start the tours
function startTour1(){
tour1.restart();
}

function startTour2(){
tour2.restart();
}


What I have tested :
If I do not initialize the tour 2, the tour 1 works perfectly when StartTour1() is called.
I also tried to implement my start function like that :

function startTour2(){
tour2.init();
tour2.restart();
}


In this case, the tour1 works great, but when the tour2 starts, it runs on the first step but when arriving to the 2nd step, I have this error message :


Bootstrap Tour 'tour' | Redirect to /member/show/2072

Bootstrap Tour 'tour' | Redirect to /base/show/1

Bootstrap Tour 'tour' | Error redirection loop to /base/show/1


I haven't found any exemple of multi initializations in one page on the Internet, or any spec. about that in the doc.
Thanks by advance if you have any clue.

Answer Source

I found my mistake : The tours have a variable "name". By default it's defined as 'tour' , and if it's not overwritten, all the tours have the same name. If each tour has its own name, my code works perfectly.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download