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 functionHow 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.
jQuery ready() method
Syntax:
$(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() {
// Callback function
$("#sortable").sortable();
// Log message
console.log("Success");
});Output:
SuccessThis method will help after fully loading the library, and then the events will happen.
Summary
This article showed you the root cause of the TypeError: $(…).sortable is not a function in jQuery and some simple fixes. If you are facing some other errors, look it up in our search bar, we have a lot of valuable articles for you.
Maybe you are interested:
- Solution To TypeError: $(…).DataTable Is Not A Function Error In JQuery
- TypeError: $(…).animate is not a function in jQuery
- TypeError: $.getJSON is not a function in jQuery
My name is Tom Joseph, and I work as a software engineer. I enjoy programming and passing on my experience. C, C++, JAVA, and Python are my strong programming languages that I can share with everyone. In addition, I have also developed projects using Javascript, html, css.
Job: Developer
Name of the university: UTC
Programming Languages: C, C++, Javascript, JAVA, python, html, css