I am trying to use bootstrap tour in my web application. Everything worked fine at the first 5 minutes and I saw the popup steps, the first time and the only time. Then the popups just disappeared later. I tried many methods even restarted the pc, and it turned out that every time I clear the browser cache, it works once. Then I need to clear the cache again.
The code look like this:
helpButton.click(function() {
if (window.steps === undefined)
return;
alert("element: " + window.steps[0].element + ", title: " + window.steps[0].title + ", content: " + window.steps[0].content + ", val: " + $(window.steps[0].element).val());
var tour = new Tour({
steps: window.steps
});
tour.init();
tour.start();
alert("finished.");
});
And steps look like:
<script type="text/javascript">
var steps = [
{ element: "#choose-team", title: "快速编辑", content: "可以在这里直接编辑标题,自动保存", position: "n" },
{ element: ".hidden-editor:first", title: "快速编辑2", content: "可以在这里直接编辑标题,自动保存2", position: "n" }
];
Any idea? thanks.
The issue is related to the libraries configuration as it stores data to a DOM Storage Interface by default.
DOCS
Option: storage
Default: window.localStorage
Description:
The storage system you want to use. Could be the objects window.localStorage, window.sessionStorage or your own object. You can set this option as false to disable storage persistence (the tour starts from beginning every time the page is loaded).
FIX
var tour = new Tour({
steps: window.steps,
storage: false
});
I Just found another way to walk around the problem, if storage is a must. Use restart() instead of start() can solve the problem as well. And there is a start(true) instead of restart(), but it jump to the last step directly.
It sounds like this tour, be default, is designed to work as an one-time tour. For example, when something on your website is updated, the tour should automatically run once to show the update, and will will never bother the user again.
To make it a repeatable tour, disable the storage by "storage: false" in option, or use restart() instead of start().
If you want to Run continuously. Create instance like this
var tour = new Tour({
storage: false,
steps: [],
});
Then call these function on some button click.
$(document).ready(function(){
$('#tour').click(function(){
tour.init();
tour.restart();
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With