Bootstrap Tour Prev button not going to Previous page

Question

For clarification there are two pages:

index.html ( from this page with the help of next buttons on the pop-up I traverse to the second page mentioned below)
product_detail.html (from this page if i want to go back to index.html using prev button, the pop-up closes and nothing happens)

Content of custom.js:

var tour = new Tour({
    storage : false,
  steps: [
  {
    element: "#ture-one",
    title: "",
    placement: "bottom",
    content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
  },
  {
    element: "#ture-two",
     title: "",
    placement: "bottom",
    content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
  },
  {
    element: "#ture-three",
    title: "",
    placement: "bottom",
    content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
  },
  {
    element: "#ture-four",
    title: "",
    placement: "bottom",
    content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
  },
  {
    path:"/a/agile_new/product_detail.html",
    element: "#ture-five",
    title: "",
    placement: "left",
    content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
  },
  {

    element: "#ture-six",
    title: "",
    placement: "left",
    content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
  },
  {

    element: "#ture-seven",
    title: "",
    placement: "right",
    content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
  },
  {

    element: "#ture-eight",
    title: "",
    placement: "right",
    content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"       
  }
]});


tour.init();

tour.start();

I'm not familiar to bootstrap tour anyway, there is a link to product_detail but i don't see any sort of links to index.html in that code, is it supposed to go back by magic..? — T J, Apr 05 '14 at 11:07
@TilwinJoy: Your question is Fair enough. That's what I'm trying to figure out right here. Since i found no solution out there to go back to prev page by using the pop-over's prev button. — Amit Singh, Apr 05 '14 at 11:22
@sanki have you got any solution regards your problem.. thanks — Jot Dhaliwal, Apr 09 '14 at 06:50
There is a "strange" way of doing it. I am not a bootstrap tour, but you can push to history ? `var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html")` — Ovidiu B, Apr 09 '14 at 13:02
@OvidiuB: That suggestion sounds very promising to me thanks, I'll try that for sure. — Amit Singh, Apr 09 '14 at 13:39
plz tell on which step you want a to go previous,,, i hopefully give a right answer .. i find a solution and wants 50 bounty ;) @sanki — Jot Dhaliwal, Apr 09 '14 at 13:56
plz give a try with my updated answer code ... @sanki now.. will assist u tomorow thnks gud nite — Jot Dhaliwal, Apr 09 '14 at 15:19
@Jatt.net: Thanks a lot, I really appreciate your help. Hope to catch you tomorrow too. — Amit Singh, Apr 09 '14 at 15:25

score 2 · Answer 1 · answered Apr 09 '14 at 13:54

According to the http://bootstraptour.com/api/ it looks like there is an option you can add the path on each of your steps. You've only defined path on the last step. Try adding the additional property on each of the steps.

path: "/"

I took this code directly from how they do the demo tour. Notice they specify a path for each step.

steps: [
  {
    path: "/",
    element: "#demo",
    placement: "bottom",
    title: "Welcome to Bootstrap Tour!",
    content: "Introduce new users to your product by walking them through it step by step."
  }, {
    path: "/",
    element: "#usage",
    placement: "top",
    title: "A super simple setup",
    content: "Easy is better, right? The tour is up and running with just a few options and steps."
  }, {
    path: "/",
    element: "#license",
    placement: "top",
    title: "Best of all, it's free!",
    content: "Yeah! Free as in beer... or speech. Use and abuse, but don't forget to contribute!"
  }, {
    path: "/api",
    element: "#options",
    placement: "top",
    title: "Flexibilty and expressiveness",
    content: "There are more options for those who want to get on the dark side.<br>\nPower to the people!",
    reflex: true
  }, {
    path: "/api",
    element: "#duration",
    placement: "top",
    title: "Automagically expiring step",
    content: "A new addition: make your tour (or step) completely automatic. You set the duration, Bootstrap\nTour does the rest. For instance, this step will disappear in <em>5</em> seconds.",
    duration: 5000
  }, {
    path: "/api",
    element: "#methods",
    placement: "top",
    title: "A new shiny Backdrop option",
    content: "If you need to highlight the current step's element, activate the backdrop and you won't lose\nthe focus anymore!",
    backdrop: true
  }, {
    path: "/api",
    element: "#reflex",
    placement: "bottom",
    title: "Reflex mode",
    content: "Reflex mode is enabled, click on the text in the cell to continue!",
    reflex: true
  }, {
    path: "/api",
    title: "And support for orphan steps",
    content: "If you activate the orphan property, the step(s) are shown centered in the page, and you can\nforget to specify element and placement!",
    orphan: true,
    onHidden: function() {
      return window.location.assign("/");
    }
  }
]

There are also a ton of different options you can provide for steps. Notice the last step above. onHidden: , it can be made to take you wherever you like. In this case, back home. "/"

path: "",
  element: "",
  placement: "right",
  title: "",
  content: "",
  next: 0,
  prev: 0,
  animation: true,
  container: "body",
  backdrop: false,
  redirect: true,
  reflex: false,
  orphan: false,
  template: "",
  onShow: function (tour) {},
  onShown: function (tour) {},
  onHide: function (tour) {},
  onHidden: function (tour) {},
  onNext: function (tour) {},
  onPrev: function (tour) {},
  onPause: function (tour) {},
  onResume: function (tour) {}

I hope this helps you.

please tell me the step numbr from which you want to turn back @sanki — Jot Dhaliwal, Apr 09 '14 at 14:00
Did you add a path to each step? You can also add prev: to a step and specify the number of the step index you wish to return back to. — xCNPx, Apr 09 '14 at 14:10
Yes I have tried adding path to each step. But didn't worked for me. Could you please help me out. Thanks — Amit Singh, Apr 09 '14 at 14:14
In your global tour options have you tried adding debug: true , then checking the console? In addition, have you checked the console at all for errors / info? — xCNPx, Apr 09 '14 at 14:18

Jot Dhaliwal · Accepted Answer · 2014-04-11T15:36:02.687

2

Please have a look over updated script file... it works fine at mine side

$(function () {

    var tour = new Tour({

        steps: [
        {
            element: "#ture-one",
            title: "s",
            placement: "bottom",
            content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
            duration:5000
        },
        {
            element: "#ture-two",
            title: "",
            placement: "bottom",
            content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
            duration: 6000
        },
        {
            element: "#ture-three",
            title: "",
            placement: "bottom",
            content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
            duration: 7000
        },
        {
            path:"/index.html",
            element: "#ture-four",
            title: "",
            placement: "bottom",
            content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
            duration: 7000
        },
      {
          path:"/product.html",
          element: "#ture-five",
          title: "",
          placement: "left",
          content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
          duration: 7000
      },
      {

          element: "#ture-six",
          title: "",
          placement: "left",
          content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>",
          duration: 7000
      },
      {

          element: "#ture-seven",
          title: "",
          placement: "right",
          content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"
      },
      {

          element: "#ture-eight",
          title: "",
          placement: "right",
          content: "<p>This is the Deployment Manager Dashboard.</p><p>It shows you which versions of your software are deployed to your different environments.</p>"       
      }
        ]});


    tour.init();

    tour.start();
});

edited Apr 11 '14 at 15:36

answered Apr 09 '14 at 14:03

Jot Dhaliwal

1,470
4
26
47

What actually is happening when I add path in Step 4 i,e. #ture-four, its not going to the other path i,e. "/a/agile_new/product_detail.html".It keeps taking me back to the index.html page, I don't know why. May be its the Bootstrap-tour "storage" parameter's value that's causing the issue. I have set "storage: window.localStorage". Is that right? – Amit Singh Apr 09 '14 at 14:13
after adding the path in fourth step... you click on prev or next button... actually i m not geeting the point you are expalining in above comment – Jot Dhaliwal Apr 09 '14 at 14:18
Ok let me Clarify. After adding path in the fourth step as you said, If i click the next button which is supposed to take the user on the product_detail.html page is not working. On clicking the next button it is staying at the index.html page. – Amit Singh Apr 09 '14 at 14:21
Can you please post first 20 lines of code of bootstrap-tour.js too. – Amit Singh Apr 09 '14 at 15:23
Hi sorry for replying so late, got stuck in some other work. BTW i tried it and unfortunately didn't worked as desired. Anyways Thanks for your support. – Amit Singh Apr 11 '14 at 11:39
Have you tried with my code(updated answer),, it works fine at mine end @sanki – Jot Dhaliwal Apr 11 '14 at 11:56
Yes I tried that I think the problem is with the values that needs to be set in bootstrap-tour.js. Not in the code you posted. Can you post that too please. – Amit Singh Apr 11 '14 at 11:58
Well Jatt i didn't tried yet but I hope this will solve the issue. The thing is I feel you deserved the bounty for the amount of efort you put in. – Amit Singh Apr 11 '14 at 12:21
hmmm but i also think aboutt solution,, that make me more hapy than this bounty credit :) @sanki – Jot Dhaliwal Apr 11 '14 at 12:26
I Hope to be in touch with you and eventually we will solve the issue. – Amit Singh Apr 11 '14 at 12:28
yeah great,,, u from @sanki. – Jot Dhaliwal Apr 11 '14 at 12:29
Great .. M from Chandigarh Punjab... @sanki – Jot Dhaliwal Apr 11 '14 at 12:36

score 1 · Answer 3 · answered Apr 09 '14 at 13:42

1

There is a "strange" way of doing it. I am not a user of bootstrap tour, but you can push to history ?

var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html")

or use localStorage to store last page by user

answered Apr 09 '14 at 13:42

Ovidiu B

106
7

As soon as I try your suggestion I will accept your answer and award you the bounty. Thanks for posting this as an answer I was about to ask you to post the comment as "ANSWER". – Amit Singh Apr 09 '14 at 13:59
you're welcome, as I said, I am not using boostrap tour, but I just assumed you tried all the options offered by bootstrap tour. Thank you! – Ovidiu B Apr 09 '14 at 14:12

Bootstrap Tour Prev button not going to Previous page

3 Answers3