Steps not showing a second time after Guide has ended and been restarted #5
Description
We are using Guideline on a single page app (backbone marionette) to do a ‘welcome tour’ for some of our features. As sections of the site are rendered and removed dynamically, a requirement was for the tooltips to appear only when certain DOM elements are present on the page.
Due to the nature of the site, both the ‘anchor’ elements (referenced in the 'showAt' param) and ’trigger’ elements ('continueAt' param) are removed and re-added at different times throughout the tour (without loading a different page).
After restarting the guide again after skipping or completing the guide, some steps (specifically steps with a function passed to 'showAt') do not show, or show in the wrong place. Also the 'continueAt' trigger does not work for these steps when running a second time.
Re-creating the error
I’ve set up a fiddle here that roughly follows my setup:
https://jsfiddle.net/benje/uq628p75/36/
To re-create the problem on that demo:
- click ‘start welcome tour’
- Ok, continue,
- Ok, continue,
- “Show post 3”
- “Click to skip step”
—> Get to step tooltip 4 and everything worked fine (now the problem)
- Now click [ X ] close on tooltip 4.
- Click “Hide post 3” button to remove the step 3 content.
- click “Start welcome tour” again… follow the steps to “Step tooltip 3” and two weird things happen..
a) the tooltip shows even if the content doesn’t exist there.
b) when you click ‘show post 3’ and click 'Click to skip step' nothing happens (this should trigger the next step using the “continueWhen”
Any idea what could be causing the problems with running the guide a second time while using the ‘showAt’ functionality?
Also I should let you know that I made a couple of tweaks to your original script, trying to debug what was happening. I don’t think the changes I’ve made are causing the problem, as I added them after discovering the problem.