# Solution to fix TypeError: $(…).sortable is not a function in jQuery The TypeError:$(…).sortable is not a function in jQuery is a fundamental error encountered by most jquery users. To solve this problem, we first need to find their cause to fix it easily and quickly.

## Why does the TypeError: $(…).sortable is not a function in jQuery occur? After we learn about this error, we summarize it into 2 main reasons below: • Missing jQuery UI library or wrong path to jQuery UI library or load jQuery UI library before jQuery library. • Load the Javascript file before loading the jQuery UI library. Example: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Example</title> </head> <body> <ul id="sortable"> <li><span>Item 1</span></li> <li><span>Item 2</span></li> <li><span>Item 3</span></li> </ul> // Load jQuery library <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous" ></script> // Load file Javascript <script src="main.js"></script> </body> </html> In file main.js: $("#sortable").sortable();

Output:

Uncaught TypeError: $(...).sortable is not a function ## How to fix this error? ### Put the library file in the right place To avoid basic mistakes like this, we want to remind you that before using certain methods, you must understand what it is and what libraries are needed for them to work. Once you have noticed that and still have this problem, maybe your library path is wrong; check your library carefully for any extra or missing characters. And one more note is the order of loading libraries, which is first and later. Those are the solutions we give you to avoid this error. ### Load the Javascript file before loading the jQuery UI library In the above case, I also said the order of loading the jQuery and jQuery UI libraries. In this case, I will talk about the order of loading the Javascript file before the jQuery UI library. To use the sortable() method, Javascript needs the jQuery UI library to use it. Loading the Javascript file before loading the jQuery UI library will make sortable() method unusable in file Javascript. We should load the jQuery UI library first and then the Javascript file or use the ready() method to fix “TypeError:$(…).sortable is not a function” in jQuery.

$(document).ready(function) Parameter: • function: Requested and run after the document is loaded Example: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Example</title> </head> <body> <ul id="sortable"> <li><span>Item 1</span></li> <li><span>Item 2</span></li> <li><span>Item 3</span></li> </ul> // Load jQuery <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script> // Load file Javascript <script src="main.js"></script> // Load jQuery UI <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script> </body> </html> In file main.js: $(document).ready(function() {