Link to home
Start Free TrialLog in
Avatar of Wayne Barron
Wayne BarronFlag for United States of America

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.
<table id="SongList">

Open in new window

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>

Open in new window


Avatar of David H.H.Lee
David H.H.Lee
Flag of Malaysia image

You can consider add a timer to reload your <div> once everything is finished (inside update function).

setTimeout(function(){  $('#SongList').load('SongList.asp?DJID=1&chID=1');}, 1000);

Open in new window



Avatar of Wayne Barron

ASKER

It works on the first sorting.
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
Avatar of David H.H.Lee
David H.H.Lee
Flag of Malaysia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
<!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>

Open in new window

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() {

------
David
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);

Open in new window


This is what did it and made it work.
No errors and it works great.
Thank you so very much.
I updated my information and code in my last post.
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);
});

Open in new window

by :
$('#SongList').load('SongList.asp', { DJID: 1, chID: 1 }, function() {
    // Let's make it again
    $("#sortable").sortable(options);
});

Open in new window