Multiple tours in one page

[erdimeola]

Joyride Version 2.0.3, JQuery Version 1.9.0,

I have multiple joyrides for one page. And I want to initiate them on different actions. But after the first joyride has been initiated and finished, the other ones do not start. Instead, the first joyride is being shown again.

To describe it order; -> document loads -> first joyride is being shown, -> when I click the span that has a onclick function about initializing the second joyride, first joyride is being shown again instead of the second one

_Update_

I've invoked the destroy method in a postRideCallback function, but still no luck..

[adampope]

I'm trying to this as well with no success. In my situation I'd like to have one tour, get the user to perform and action and then start another tour. But starting the second tour replays the first tour.

[dschleifer]

Same here - would love to hear about a workaround if someone finds one.

[nicolaslara]

I'm having the same use case/problem. I'll post back if I find a solution.

[grvhi]

EDIT: I've just re-read the OP's issue and I notice he's already tried the 'destroy' method I've used, but it works for me.....

I think I have a solution to this problem (although I call my second tour on an AJAX load of secondary content, so my situation may be slightly different): call the 'destroy' function on the first tour after it is complete:

$(window).load(function() { $('.first-joyride-tips').joyride({ postRideCallback: function(){ $('.first-joyride-tips').joyride('destroy'); }, autoStart : true, modal:false, expose: false }); });

Then call your '.second-joyride-tips'.

[grvhi]

You could also try setting a boolean flag:

var showFirstJoyride = true; if(showFirstJoyride){ ..... postRideCallback: function(){ showFirstJoyride = false; }, ..... }