Borislav Hadzhiev
Tue Oct 19 2021·2 min read
Photo by Lisha Riabinina
The "$(...).sortable is not a function" jQuery error occurs for multiple reasons:
To solve the "$(...).sortable is not a function" jQuery error, make sure to load the jQuery library before loading the jQuery UI library. The libraries have to be loaded only once on the page, otherwise the error is thrown.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <!-- ✅ Load CSS file for jQuery ui --> <link href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" /> <style> #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } #sortable li span { position: absolute; margin-left: -1.3em; } </style> </head> <body> <ul id="sortable"> <li class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1 </li> <li class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2 </li> <li class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3 </li> </ul> <!-- ✅ load jQuery ✅ --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <!-- ✅ load jQuery UI ✅ --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer" ></script> <!-- ✅ load your JS file ✅ --> <script src="index.js"></script> </body> </html>
The order we loaded the scripts in is very important. The order should be the following:
index.js
in the example).Here's the code for the index.js
file.
$(document).ready(function () { $('#sortable').sortable(); });
We wait for the DOM to be ready and initialize the functionality.
If you open the page you'll see a working implementation of the sortable component.
If you're still getting the error, make sure you're not loading the jQuery library twice. Loading the library a second time re-runs the initialization process and causes the error.
Specifying an incorrect path to the jQuery or jQuery UI scripts is equivalent to not loading the scripts at all.
You can check if the specified paths are correct by opening the console in your browser and checking if you have any 404 errors related to loading the jQuery or jQuery UI libraries.