How can i activate a second joyride tour

Question

I have a problem with my joyride tour ,When i finsish one tour i want to start a second one .What i try to do is execute a seconde tour in the postRideCallback ,but i end up looping the first tour .Does somebody knows how to fix this?

function preview(){
    $('#joyRideTipContent').joyride({
        autoStart : true,
        preStepCallback : function(index, tip) {
            console.log(index);
        },
        postStepCallback : function(index, tip) {
        },
        postRideCallback : function(index, tip) {
            console.log("stop1");
            preview2();
            console.log("stop1.1");
        },
        tipLocation:"left",
        modal : true,
        expose : true
    });
}
function preview2(){
    console.log("stop2.0");
    $('#joyRideTipContent2').joyride({
        preStepCallback : function(index, tip) {
        console.log("stop21.0");
        },
        postStepCallback : function(index, tip) {
        console.log("stop22.0");
        },
        postRideCallback : function(index, tip) {
            console.log("stop23");
            alert("tada")
        },
        tipLocation:"left",
        modal : true,
        expose : true
    });
    console.log("stop2.1");
}

in my code (see above) preview is the function that i use to start the joyride tour and the console.log's are just for testing and do not hava a specific meaning

Answer 1

Where are you starting joyride? Can you post all your source code? If you did not do that, try:

  function preview(){
    $('#joyRideTipContent').joyride({
        autoStart : true,
        preStepCallback : function(index, tip) {
            console.log(index);
        },
        postStepCallback : function(index, tip) {
        },
        postRideCallback : function(index, tip) {
            console.log("stop1");
            preview2();
            console.log("stop1.1");
        },
        tipLocation:"left",
        modal : true,
        expose : true
    }).foundation('joyride', 'start');
  }

Answer 2

Why don't you just add a query variable to your pages URL? e.g.

yoursite.com/page?tour=1
yoursite.com/page?tour=2

When you finish tour 1, you can have a link on your last tour popup that links to ...?tour=2.

What you will need to do is check the query variable on your server (assuming this is where your html is generated) and do a simple if/else to output the relevant code in your html page e.g.

if ($tour == 1) {
   // add tour 1 markup and script here
}
elseif ($tour == 2){
  // add your 2 markup and script here
}

This will mean that the html output will only ever have one tours info. The way you are doing it now is a little messy as the tours are clashing with each other. Using this simple method will ensure that only one tour is ever loaded into your html

Answer 3

I know this is an old question, but I added a check that calls joyride's destroy method to remove the previous tutorial contents before starting another one.

function tutorial1(){
    if($('.joyride-tip-content')) {
        $.fn.joyride('destroy')
    }
    $('#joyRideTutorial1').joyride({
        modal:true,
        autoStart : true,
        expose: true
    });
 }
 function tutorial2(){
    if($('.joyride-tip-content')) {
        $.fn.joyride('destroy')
    }
    $('#joyRideTutorial2').joyride({
        modal:true,
        autoStart : true,
        expose: true
    });
 }

Seems to be working well so far.