-1

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>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Mr. Crypto
  • 39
  • 5

3 Answers3

0

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

0

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.

ali saberimovahed
  • 115
  • 1
  • 9
0

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335