Tour is not defined #753

thurdev · 2021-02-08T12:25:46Z

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>assets/icon_laranja.png">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="<%= BASE_URL %>loader.css">
    <script src="https://kit.fontawesome.com/3cc432bb58.js" crossorigin="anonymous"></script>
    <title>Pleez - Admin Panel</title>
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Expires" content="-1">
  </head>
  <link rel="stylesheet" href="./assets/js/bootstraptour/build/css/bootstrap-tour-standalone.min.css">
  <body>
    <noscript>
      <strong>We're sorry but Vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="loading-bg">
      <div class="loading-logo">
        <img src="<%= BASE_URL %>logo.png" alt="Logo" style="width: 80px;">
      </div>
      <div class="loading">
        <div class="effect-1 effects"></div>
        <div class="effect-2 effects"></div>
        <div class="effect-3 effects"></div>
      </div>
    </div>
    <div id="app">

    </div>
    <!-- built files will be auto injected -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src='https://js.stripe.com/v3/'></script>
    <script src="./assets/js/bootstraptour/build/js/bootstrap-tour-standalone.min.js"></script>
    <script>
      var tour = new Tour({
        steps: [
        {
          element: "#etiquetas",
          title: "Title of my step",
          content: "Content of my step"
        }
      ]});

      // Initialize the tour
      tour.init();

      // Start the tour
      tour.start();
    </script>
  </body>
</html>

thurdev · 2021-02-08T13:19:25Z

Just updating, i removed the " . " from "./assets/" and now the lib is imported, but still doesn't work, i can like console.log(Tour) but nothing happen with tour.init() and tour.start()

stefaneidelloth · 2023-01-11T12:56:51Z

First I had issues dynamically loading bootstrap-tour. The solution for me was to use a load event handler that ensures that new Tour is called after the script has been loaded.

Second, only the first loading worked. After resetting the cache and reloading the page, I expected the tour to start again. However, it did not. In order to restart the tour I had to use the option

storage: false, // also see http://bootstraptour.com/api/

Maybe that option helps you, too.

That said... bootstrap-tour seems to be abandoned. Therefore, maybe use an alternative like intro.js if their license is fine for you.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tour is not defined #753

Tour is not defined #753

thurdev commented Feb 8, 2021 •

edited

Loading

thurdev commented Feb 8, 2021

stefaneidelloth commented Jan 11, 2023 •

edited

Loading

Tour is not defined #753

Tour is not defined #753

Comments

thurdev commented Feb 8, 2021 • edited Loading

thurdev commented Feb 8, 2021

stefaneidelloth commented Jan 11, 2023 • edited Loading

thurdev commented Feb 8, 2021 •

edited

Loading

stefaneidelloth commented Jan 11, 2023 •

edited

Loading