I have imported the sortable and jquery references to my html, however, it says that
Uncaught TypeError: $(...).sortable is not a function
and
Uncaught Error: jQuery is required for jquery-sortablejs
I have never used jquery before hence new to this all. I have taken this exact code as a demo of this website, and it is working on code pen, however wont work on my own laptop.
$('.sortable-list').sortable({
connectWith: '.sortable-list',
update: function(event, ui) {
var changedList = this.id;
var order = $(this).sortable('toArray');
var positions = order.join(';');
console.log({
id: changedList,
positions: positions
});
}
});<html>
<script src="@latest/Sortable.min.js"></script>
<script src="@latest/jquery-sortable.js"></script>
<script src=".12.4.js"></script>
<script src=".12.1/jquery-ui.js"></script>
<script src=".5.1/jquery.min.js"></script>
<script type="text/javascript" src="/Users/rankWebsite/js/main.js"></script>
<body>
<h1> Rank Images</h1>
<ul id="image-list1" class="sortable-list">
<li id="a">A</li>
<li id="b">B</li>
<li id="c">C</li>
</ul>
</body>
</html>I have imported the sortable and jquery references to my html, however, it says that
Uncaught TypeError: $(...).sortable is not a function
and
Uncaught Error: jQuery is required for jquery-sortablejs
I have never used jquery before hence new to this all. I have taken this exact code as a demo of this website, and it is working on code pen, however wont work on my own laptop.
$('.sortable-list').sortable({
connectWith: '.sortable-list',
update: function(event, ui) {
var changedList = this.id;
var order = $(this).sortable('toArray');
var positions = order.join(';');
console.log({
id: changedList,
positions: positions
});
}
});<html>
<script src="https://cdn.jsdelivr/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="https://cdn.jsdelivr/npm/jquery-sortablejs@latest/jquery-sortable.js"></script>
<script src="https://code.jquery./jquery-1.12.4.js"></script>
<script src="https://code.jquery./ui/1.12.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis./ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="/Users/rankWebsite/js/main.js"></script>
<body>
<h1> Rank Images</h1>
<ul id="image-list1" class="sortable-list">
<li id="a">A</li>
<li id="b">B</li>
<li id="c">C</li>
</ul>
</body>
</html>-
Look at the errors in the console. You're including
jquery-sortable.jsbeforejquery.js. You're also including multiple versions of jQuery. Remove 1.12.4 and move 3.5.1 to that position. – Rory McCrossan Commented Nov 19, 2020 at 9:22 - what do you mean by jquery.sortable.js before jquery.js? i only want to use jquery for the srotable functions – user14578710 Commented Nov 19, 2020 at 9:27
- I've added an answer to show you what I mean – Rory McCrossan Commented Nov 19, 2020 at 9:29
1 Answer
Reset to default 3The issue with your code is due to the order of the script references. Any script which relies on jquery.js has to be included in the page after jQuery. In addition you're including two versions of jQuery which can cause issues. I'd suggest keeping 3.5.1 and removing 1.12.4. Try this:
$('.sortable-list').sortable({
connectWith: '.sortable-list',
update: function(event, ui) {
var changedList = this.id;
var order = $(this).sortable('toArray');
var positions = order.join(';');
console.log({
id: changedList,
positions: positions
});
}
});<script src="https://cdn.jsdelivr/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="https://ajax.googleapis./ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery./ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr/npm/jquery-sortablejs@latest/jquery-sortable.js"></script>
<h1> Rank Images</h1>
<ul id="image-list1" class="sortable-list">
<li id="a">A</li>
<li id="b">B</li>
<li id="c">C</li>
</ul>