I encountered an issue while attempting to utilize a JavaScript script - I received an error message stating "Uncaught ReferenceError: jQuery is not defined."

Currently, I am utilizing a template with multiple pages and I need to use one of them. I followed all the necessary steps correctly, but I encountered an error in the console that says Uncaught ReferenceError: jQuery is not defined. Below is my HTML script:

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

I have verified the path multiple times and it is correct. I'm not sure what information to provide to diagnose such errors. Here is my index.html file:

<!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 process -->
<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;
  }
  
  ...
  
</body>
<script src="assets/js/pages/custom/wizard/wizard-1.js"></script>
</html>

Answer №1

It seems like wizard-1.js relies on jQuery for its functionality. Consequently, it is imperative to ensure that jQuery is loaded prior to wizard-1.js.

To achieve this, you can follow these steps:

<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>

Furthermore, it is advisable to include script tags at the bottom of your body tag for optimal performance.

Answer №2

It seems like the library you are using requires jquery, but you forgot to include it in your HTML code. You can fix this by adding the following script:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Passport - Pairing Plan "Error|The username provided for sign_request() is not recognized"

Currently experimenting with duo in node.js using passport to test its implementation in an application....Utilizing a passport-duo strategy and encountering issues when trying to apply the example provided in my own project. The GitHub repository for pass ...

Developing Wordpress plugins involving images - path not found

I'm currently developing a WordPress plugin and encountering some issues with images. My plugin is located in wp-content/plugins/my-plugin/ directory, and within that, there's a folder named images/test.png - how can I properly reference this ima ...

How to transmit data from a button click using Ajax/jquery without the need to refresh the page

I've been struggling for hours to make this work and haven't made any progress. What I'm attempting to accomplish is sending a URL when a button is clicked, without refreshing the page. PHP code for the button: echo '<a href=" ...

What is the method for displaying the value of a textarea?

I am relatively new to the world of coding, but I have already delved into HTML, CSS, and basic DOM scripting. My goal is simple - I want to create a comment box where people can leave messages like in a guestbook. However, when I input text and click on ...

Tips on confirming the completion of my form when the next button is pressed

I am working on a multi-step form with a jQuery script to split the forms. The first form has only one button - the next button, which takes the client to the next form. However, when I click on the next button in the first form, it moves to the next form ...

Using JavaScript to open a new window and display CSS while it loads

I am looking to utilize a new window for printing a portion of HTML content. var cssLink = document.getElementByTagName('link')[2]; var prtContent = document.getElementById('print_body'); var WinPrint = window.open(' ...

How can I modify the mesh structure in Three.js?

Having two meshes, mesh1 and mesh2, each with the same number of vertices and extrusion. mesh1 = 5000 vertices. mesh2 = 5000 vertices. I transfer the vertices from mesh2 to mesh1. Then I execute: mesh2.geometry.verticesNeedUpdate = true; mesh2.geometry. ...

Displaying all Sunday events in a jQuery FullCalendar

Is there a way to automatically add events for all the Sundays on my calendar using FullCalendar? day = 'Sunday'; <------ I want to specify this day to create an event var date = new Date(); var event = {id: result.id, title: from_time + &ap ...

Stop the Bootstrap 5 accordion from expanding when the spacebar is pressed in the header text input

Within my React app using react-bootstrap, I have implemented an accordion component that expands or collapses based on the user's interaction with a text input located in the AccordianHeader component. Interestingly, whenever the spacebar is released ...

Capture and transform every alert into a notification

I have implemented Gritter for notifications across my website and am curious if there is an easy method to intercept all alert() messages triggered by scripts using jQuery, and then display the contents of the alert in a Gritter notification. Is there a ...

Implementing a universal timer for tmi.js and discord.js integration

I am currently working on a Discord bot that monitors multiple Twitch chats for commands and executes them on Discord using tmi.js and discord.js. Everything is functioning as expected, but I am facing an issue with implementing a global cooldown on the ...

What is the best way to access a value within a JSON object in a React render method?

Overview I am currently working on creating a blog using React and JSON data. Upon checking this.state.blogs, I am getting the output of: [object Object],[object Object],[object Object]. I have attempted to use the .map function but I am not sure how to ...

Using jQuery to smoothly fade in elements and apply a new CSS

Currently, I am utilizing jQuery to add a class to an element when hovered over by using addClass('active') Although the class adds a border and alters the background color, I am hoping to achieve a fading effect for these changes instead of the ...

The jQuery Validation plugin ensures that a minimum of one image has been uploaded

My current setup includes a form that permits users to upload images. Each image uploaded by the user is shown in a div named imgHolder, located outside the form. In addition, once a user uploads 5 files, the corresponding file[] input from the form is rem ...

We'll show you the steps to properly organize a set of radio buttons created dynamically within a 'controlgroup' using jQuery Mobile

I am facing an issue with grouping dynamically generated radio buttons into a jQuery Mobile control group. I generate the radio buttons and append them to a div, but they are displayed separately even though the wrapping div contains a 'controlgroup&a ...

Optimize my webpage for a specific location

While developing a game website, I am interested in learning how to enable only specific parts of my website to function while disabling the rest. How can this be achieved? ...

Submit form using jQuery after making an AJAX request with jQuery's $

I'm working on the following code: $.get(link, function(data, status) { document.getElementById("test").value = data; }); $('#formtest').submit(); Everything works fine in Firefox, but in Google Chrome the submit is done before t ...

I require a JQuery bubble chart that can showcase bubbles in a variety of vibrant colors

I have been working with bubble charts using Highcharts in jQuery recently. I am trying to assign different colors to my bubbles based on specific data, but I am encountering an issue. When I provide colors along with the data like this: var data = {[x:30 ...

Navigate through intricate nested JSON array structures in JavaScript

nested json structure Json Tree Structure: { "id": "30080", "dataelements": { "Name": "abc" }, "children": [ { "id": "33024", "dataelements": { "Name": "a" }, "children": [ { "id": "33024", ...

Working with post metadata in functions.php and making AJAX requests

I may be inexperienced, but I am struggling with this issue. Why is it that when I perform the following: function my_f() { $sss = 'some data'; echo ($sss); die(); } add_action('wp_ajax_nopriv_my_f', 'my_f'); add_acti ...