Warning: session_start(): open(/tmp/sess_4005162adcb743e59a6bac940a916b92, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
Solution to fix TypeError: $(...).sortable is not a function in jQuery - LearnShareIT

Solution to fix TypeError: $(…).sortable is not a function in jQuery

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.

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: 

Success

This 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:

Leave a Reply

Your email address will not be published. Required fields are marked *