Wayne Barron
asked on
JQuery Refresh DIV after sorting (Code provided)
Hello, All.
I am working with a JQuery Sorting table.
Love it, works great.
However, I am trying to make it do an auto-update-refresh, so it will get the new sorting numbers as they are entered into the database.
The first time it is run, it works. However, anytime after the first time, it will not auto-update-refresh the data in the table.
This is what I am calling when the sorting is over.
I am working with a JQuery Sorting table.
Love it, works great.
However, I am trying to make it do an auto-update-refresh, so it will get the new sorting numbers as they are entered into the database.
The first time it is run, it works. However, anytime after the first time, it will not auto-update-refresh the data in the table.
This is what I am calling when the sorting is over.
<table id="SongList">
This is what I am using.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$("#sortable").sortable(
{opacity: 0.7,
revert: true,
scroll: true,
cursor: 'crosshair',
update : function () {
var order = $('#sortable').sortable('serialize');
//alert(order);
$("#info").load("Insert.asp?"+order);
//Refresh when we are done sorting, to get the new ordered list
$('#SongList').load('SongList.asp?DJID=1&chID=1');
}
});
});
</script>
<div id="info">Order your songs</div>
<table class="table table-bordered" id="SongList" style="width:420px; font-size:10pt; color:#CCC;">
<tr>
<th style="width:5%;">#</th>
<th style="width:15%;">Order</th>
<th style="width:100%;">Song Title</th>
<th style="width:20%;">Artist</th>
</tr>
<tbody class="row_position" id="sortable">
<tr id="favItem_49" class="dragit">
<td style="border-bottom:1px double #CCC;">0</td>
<td style="border-bottom:1px double #CCC;">49</td>
<td style="border-bottom:1px double #CCC;">Strutter</td>
<td style="border-bottom:1px double #CCC;">KISS</td>
</tr>
<tr id="favItem_48" class="dragit">
<td style="border-bottom:1px double #CCC;">1</td>
<td style="border-bottom:1px double #CCC;">48</td>
<td style="border-bottom:1px double #CCC;">Do You Love Me</td>
<td style="border-bottom:1px double #CCC;">KISS</td>
</tr>
<tr id="favItem_37" class="dragit">
<td style="border-bottom:1px double #CCC;">2</td>
<td style="border-bottom:1px double #CCC;">37</td>
<td style="border-bottom:1px double #CCC;">Who Wants to be Lonely</td>
<td style="border-bottom:1px double #CCC;">KISS</td>
</tr>
<tr id="favItem_65" class="dragit">
<td style="border-bottom:1px double #CCC;">3</td>
<td style="border-bottom:1px double #CCC;">65</td>
<td style="border-bottom:1px double #CCC;">Tears are Falling</td>
<td style="border-bottom:1px double #CCC;">KISS</td>
</tr>
<tr id="favItem_43" class="dragit">
<td style="border-bottom:1px double #CCC;">4</td>
<td style="border-bottom:1px double #CCC;">43</td>
<td style="border-bottom:1px double #CCC;">Love 'em and Leave 'em</td>
<td style="border-bottom:1px double #CCC;">KISS</td>
</tr>
</tbody>
</tr>
</table>
ASKER
It works on the first sorting.
However, when I do another sorting, I get the following error.
However, when I do another sorting, I get the following error.
Uncaught Error: cannot call methods on sortable prior to initialization; attempted to call method 'serialize'
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
<!DOCTYPE>
<html>
<head></head>
<body>
<div id="info">Order your songs</div>
<table class="table table-bordered" id="SongList" style="width:420px; font-size:10pt; color:#CCC;">
<tr>
<th style="width:5%;">#</th>
<th style="width:15%;">Order</th>
<th style="width:100%;">Song Title</th>
<th style="width:20%;">Artist</th>
</tr>
<tbody class="row_position" id="sortable">
<tr id="favItem_49" class="dragit">
<td style="border-bottom:1px double #CCC;">0</td>
<td style="border-bottom:1px double #CCC;">49</td>
<td style="border-bottom:1px double #CCC;">Strutter</td>
<td style="border-bottom:1px double #CCC;">KISS</td>
</tr>
<tr id="favItem_48" class="dragit">
<td style="border-bottom:1px double #CCC;">1</td>
<td style="border-bottom:1px double #CCC;">48</td>
<td style="border-bottom:1px double #CCC;">Do You Love Me</td>
<td style="border-bottom:1px double #CCC;">KISS</td>
</tr>
<tr id="favItem_37" class="dragit">
<td style="border-bottom:1px double #CCC;">2</td>
<td style="border-bottom:1px double #CCC;">37</td>
<td style="border-bottom:1px double #CCC;">Who Wants to be Lonely</td>
<td style="border-bottom:1px double #CCC;">KISS</td>
</tr>
<tr id="favItem_65" class="dragit">
<td style="border-bottom:1px double #CCC;">3</td>
<td style="border-bottom:1px double #CCC;">65</td>
<td style="border-bottom:1px double #CCC;">Tears are Falling</td>
<td style="border-bottom:1px double #CCC;">KISS</td>
</tr>
<tr id="favItem_43" class="dragit">
<td style="border-bottom:1px double #CCC;">4</td>
<td style="border-bottom:1px double #CCC;">43</td>
<td style="border-bottom:1px double #CCC;">Love 'em and Leave 'em</td>
<td style="border-bottom:1px double #CCC;">KISS</td>
</tr>
</tbody>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
const options = {
opacity: 0.7,
revert: true,
scroll: true,
cursor: 'crosshair',
update : function () {
var order = $('#sortable').sortable('serialize');
//alert(order);
$("#info").load("Insert.asp?"+order);
// Let's destroy it : https://api.jqueryui.com/sortable/#method-destroy
$("#sortable").sortable("destroy");
// Let's empty it so it doesn't look bad on user browser during the ajax refresh following
$("#SongList tbody").empty();
// or let's make it pro :)
// $("#SongList tbody").html("<tr><td><img src='/path/to/loading.gif'/></td></tr>");
//Refresh when we are done sorting, to get the new ordered list
$('#SongList').load('SongList.asp?DJID=1&chID=1').done(function() {
// Let's make it again
$("#sortable").sortable(options);
});
}
}
$("#sortable").sortable(options);
</script>
</body>
</html>
ASKER
Hey, Leak.
Running your code, I get this error at the end of the first drag, which works, but then no other drag works due to this error.
Uncaught TypeError: $(...).load(...).done is not a function
--On this line
.done(function() {
------
Running your code, I get this error at the end of the first drag, which works, but then no other drag works due to this error.
Uncaught TypeError: $(...).load(...).done is not a function
--On this line
.done(function() {
------
ASKER
David
Your line here.
This makes it an immediate update.
This is what did it and made it work.
No errors and it works great.
Thank you so very much.
Your line here.
Make the UL sortable first before calling the serialize method.And I changed the time to 250 instead of 1000
This makes it an immediate update.
// 250 is just enough for getting the order sent back to the page.
// Anything higher takes to long, and anything lower causes the order to get messed up.
setTimeout(function(){ $('#RowList').load('List.asp');}, 250);
This is what did it and made it work.
No errors and it works great.
Thank you so very much.
ASKER
I updated my information and code in my last post.
I hope it helps others who are using this great code.
I hope it helps others who are using this great code.
I get this error at the end of the first drag, which works, but then no other drag works due to this error.
Uncaught TypeError: $(...).load(...).done is not a function
--On this line
.done(function() {
so replace :
$('#SongList').load('SongList.asp?DJID=1&chID=1').done(function() {
// Let's make it again
$("#sortable").sortable(options);
});
by :$('#SongList').load('SongList.asp', { DJID: 1, chID: 1 }, function() {
// Let's make it again
$("#sortable").sortable(options);
});
Open in new window