'jQuery .sortable is not a function

Even though I've followed the directions in the jQuery UI documentation, I'm getting the error that .sortable is not a function.
Here is my code:

<div style="float: left;">
    <span class="caption" style="width: 255px; display: block;">
        Assigned Limits
    </span>
    <div class="assigned-limit-box">
        <ul id="limAssigned" class="ul-base">
        </ul>
    </div>
</div>

This is my js:

$('#limAssigned').sortable();

My jQuery js is loaded before my jQuery UI js.

What am I doing wrong?

javascript jquery-ui

Solution 1:^[1]

I had the same issue when a page using the sortable() function was required by a main php page. Adding the following code within the head of the main page wasn't sufficient. Adding it also at the beginning of the required page (inside the body in my case) fixed everything.

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

Solution 2:^[2]

I got this error by having more than 1 version of jQuery on the page. Credit goes to IonicBurger: jQuery sortable is not a function

Solution 3:^[3]

it worked for me with this specific version of Jquery

    <script src="//code.jquery.com/jquery-1.12.4.js"></script>

but it doesn't work for newer versions

Solution 4:^[4]

Exactly like user3279807 in https://stackoverflow.com/a/21604959/11630806, I've found the same issue when i load jQuery from main php page on a one page webapp with dynamic js call.

To fix it you can load jQuery to each page you need or, in my case, in the body. But if you want to keep everything clean in the header, you can also call the JQuery script in the head using defer.

<script src="https://code.jquery.com/jquery-3.6.0.min.js" defer></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" defer></script>

defer is close to async. when you call it, the execution of your script start after the load of the the DOM content but before DOMContentLoaded event. When you call multiple scripts with defer, the execution of yours scripts keep the order they occur in the page.

Solution 5:^[5]

jQuery UI and jQuery must be loaded in a certain order:

<script src="jquery.js">...
<script src="jquery-ui.js">...

Make sure you are including jQuery UI after jQuery.

Solution 6:^[6]

Use both script

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

Solution 7:^[7]

I have solved this using both the scripts.

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	user3279807
Solution 2	Gabe
Solution 3
Solution 4
Solution 5	Mohammad.Trabelsi
Solution 6	Shoeb Akhtar
Solution 7	Rohit Sutar

'jQuery .sortable is not a function

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]