jQuery code in between the page but jQuery library in footer [duplicate]

Question

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>

Quentin · Accepted Answer · 2022-03-03 17:18:14Z

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.

answered Mar 3, 2022 at 17:18

Quentin

946k133 gold badges1.3k silver badges1.4k bronze badges

Add a comment |

ali saberimovahed · Accepted Answer · 2022-03-03 17:21:38Z

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.

edited Mar 3, 2022 at 17:21

answered Mar 3, 2022 at 17:15

ali saberimovahed

1251 gold badge1 silver badge9 bronze badges

Add a comment |

score 0 · Accepted Answer · 2022-03-03 17:23:49Z

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

edited Mar 3, 2022 at 17:23

answered Mar 3, 2022 at 17:12

user14702720

Add a comment |

Collectives™ on Stack Overflow

jQuery code in between the page but jQuery library in footer [duplicate]

3 Answers 3

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Linked

Related