Search code examples
javascriptjqueryhtmlbootstrap-tour

Bootstrap Tour Prev button not going to Previous page


For clarification there are two pages:

  1. index.html ( from this page with the help of next buttons on the pop-up I traverse to the second page mentioned below)

  2. 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();

Solution

  • 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();
    });