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


ASPjQueryAJAX
Avatar of undefined
Last Comment
leakim971
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
Wayne Barron
Flag of United States of America image

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
Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of leakim971
leakim971
Flag of Guadeloupe image
<!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

Avatar of Wayne Barron
Wayne Barron
Flag of United States of America image

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

------
Avatar of Wayne Barron
Wayne Barron
Flag of United States of America image

ASKER

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.
Avatar of Wayne Barron
Wayne Barron
Flag of United States of America image

ASKER

I updated my information and code in my last post.
I hope it helps others who are using this great code.
Avatar of leakim971
leakim971
Flag of Guadeloupe image
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



ASP
ASP

Active Server Pages (ASP) is Microsoft’s first server-side engine for dynamic web pages. ASP’s support of the Component Object Model (COM) enables it to access and use compiled libraries such as DLLs. It has been superseded by ASP.NET, but will be supported by Internet Information Services (IIS) through at least 2022.

82K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts

  • "Invaluable tool for our organization"

    Josh Regalski

  • "Your help has saved me hundreds of hours of internet surfing."

    @fblack61

  • "Just a dang good service!"

    @golferski

  • "Worth every penny."

    Steve Hougom

  • "It’s been a life saver."

    Maria Halt

  • "Best support site I’ve seen!"

    Bob Schneider

  • "I would be lost without them."

    @fblack61

  • "Saved my job multiple times."

    Walt Forbes

  • "I love this site."

    Maria Duwe

  • "Friendly respectful help."

    Andrew Kowtalo

  • "Such top-notch experts."

    @magento

  • "The best money I have ever spent."

    @rwheeler23

  • "Beyond any comprehensible value"

    George Morris

  • "Invaluable tool for our organization"

    Josh Regalski

Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo
© 1996-2023 Experts Exchange, LLC. All rights reserved. Covered by US Patent