I'm trying to use a js script but it shows me this error Uncaught ReferenceError: jQuery is not defined

Question

actually I'm using a template that it include a lot of pages so I want to use one of them so I did all things correctly I guess but it shows me this error in console Uncaught ReferenceError: jQuery is not defined this is my only html script

<script src="assets/js/pages/custom/wizard/wizard-1.js"></script>

I check the path a lot of time it's a correct path I don't know what' to provide you guys in such those errors so this is my index.html

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Gestion Commerciale</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="./assets/media/svg/illustrations/logo.png">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700|Roboto:300,400,500,600,700"
  rel="stylesheet">
<link href="assets/css/pages/wizard/wizard-1.css" rel="stylesheet" type="text/css" />
<!-- Splash Screen | Appears during application initialization proccess -->
<style>
  body {
    margin: 0;
    padding: 0;
  }

  #splash-screen {
    position: absolute;
    z-index: 1000;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #f2f3f8;
  }

  #splash-screen img {
    margin-left: calc(100vw - 100%);
    margin-bottom: 30px;
  }

  #splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
  }

  .splash-spinner {
    animation: rotate 2s linear infinite;
    margin-left: calc(100vw - 100%);
    width: 50px;
    height: 50px;
  }

  .splash-spinner .path {
    stroke: #5d78ff;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
  }

  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes dash {
    0% {
      stroke-dasharray: 1, 150;
      stroke-dashoffset: 0;
    }

    50% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -35;
    }

    100% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -124;
    }
  }
</style>
</head>

<body root id="kt_body">
  <div id="splash-screen">
    <img src="./assets/media/svg/illustrations/logo.png" alt="Gestion-Commerciale-Logo" />
    <svg class="splash-spinner" viewBox="0 0 50 50">
      <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
    </svg>
  </div>
</body>
<script src="assets/js/pages/custom/wizard/wizard-1.js"></script>
</html>

As @luk2302 says, you missing jQuery. add a reference to jquery just before `` — Carsten Løvbo Andersen, Aug 11 '21 at 12:19
no I did't load any things but how to load it , do u mean that I have to execute any commande? — Otakoucht Mohamed, Aug 11 '21 at 12:21
Does this answer your question? [Uncaught ReferenceError: $ is not defined?](https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined) — kmoser, Aug 11 '21 at 12:42

MarioBe · Answer 1 · 2021-08-11T12:30:20.203

2

I guess your library needs jquery but you didn't include it in your Html try adding this:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

edited Aug 11 '21 at 12:30

answered Aug 11 '21 at 12:23

MarioBe

101
1
4

Simon Sondrup Kristensen · Accepted Answer · 2021-08-11T12:41:32.783

wizard-1.js may be depending on jQuery. If that is the case, you will need to load jQuery before wizard-1.js.

It can be done like this:

<body root id="kt_body">
  <div id="splash-screen">
    <img src="./assets/media/svg/illustrations/logo.png" alt="Gestion-Commerciale-Logo" />
    <svg class="splash-spinner" viewBox="0 0 50 50">
      <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
    </svg>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="assets/js/pages/custom/wizard/wizard-1.js"></script>
</body>

Another tip, add script tags at the bottom of your body tag

I'm trying to use a js script but it shows me this error Uncaught ReferenceError: jQuery is not defined

2 Answers2