I have jQuery library in the footer to follow the good practices. It's placed right before the </body> tag. However, I have jQuery sortable code in the middle of the page inside a modal for some reason to sort photos. My sortable code was working this way few months back up to Oct, 2021. However, I did not look up on that part of module for some months and today it's not working. The console is returning this error:
Uncaught ReferenceError: $ is not defined
Example of my code:
<head>
<title>My First page</title>
</head>
<body>
<div class="sortPhotos">
<ul id="sortable" class="reorder-gallery mt-3"></ul>
<script>
$(function() {
$("#sortable").sortable({
// CODE GOES HERE
}).disableSelection();
});
</script>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>jQuery script elements are usually put in the head element before the body
check here to see exactly where to place the jQuery script tag
It's a good practice to keep the right order when you are running any old javascript projects because the first script run sooner:
<!DOCTYPE html>
<html>
<head>
<title>My First page</title>
</head>
<body>
<div class="sortPhotos">
<ul id="sortable" class="reorder-gallery mt-3"></ul>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
$("#sortable").sortable({
// CODE GOES HERE
}).disableSelection();
});
</script>
</body>
</html>
Also check your jquery path.
Order matters.
In your first <script> you try to call the $ function and it errors because $ isn't defined.
In your second <script> you load jQuery which defines $, but by then it is too late.
Reverse the order of your <script> elements.