Question

I will try to explain my problem with as little code as possible.

Basically I have several sortable lists connected in the usual way. Each item in the list has some hidden elements that are toggled with a button on the respective items. There is also a second button that causes the list item to slideUp and be removed from the list – then being sent to a new list. This works in conjunction with an ajax call which when successful uses the .load() function to refresh the receiving sortable list.

The problem: When I use .load() to refresh the receiving sortable list, the new list item is present but the list loses its sort-ability and all the hidden items on each list item are displayed. Any idea why the .load() function removes the interactivity of refreshed page elements?

This is the code to remove an item and refresh a new list:

$(document).ready(function click(){
$(".finished").click(function() {

  if (confirm('Are you sure  is complete?')) {

  $(this).closest(".card").slideUp();

  var id = $(this).closest(".card").find(".hiddenid").val();
  var machinequantity = $(this).closest(".card").find(".machinequantity").val();

  $.ajax({

       url: "update_item_machine_complete.php",
       type: "POST",
       data: "&id="+id+"&machinequantity="+machinequantity,        
       success: function() {
                           $('#complete').load('index.php #sortable4')         
                           }
     });

    }
  });
});

Here’s an example of the receiving list:

            <div id="complete" class="box">
    <ul id="sortable4" class="sortable">
    <li class="notsortable"><h1>Complete</h1></li>
<?php

include("php/database_connect.php");


$result = mysql_query("SELECT * FROM orders WHERE misc='complete' ORDER BY columnpos   ASC ");

while($row = mysql_fetch_array($result))

              {
         echo'  

        <li id="id_' . $row['id'] . '">
         <div class="card">
         <table>
         <tr>
         <td class="left">' . $row['customer'] . '</td>
         <td></td>
         <td class="right">' . $row['ponumber'] . '</td>
         </tr>
         <tr>
         <td class="left">' . $row['partnumber'] . '</td>
         <td><div class="show"></div></td>
         <td class="right">' . $row['quantity'] . ' x Black</td>
         </tr>
         </table>
         <div class="hide">
         <p>Quantity Done: <span><input class="machinequantity" type="text" value="' . $row['quantity'] . '" /><input type="submit" value="update" /></span></p>
         <p><input class="finished" type="submit" value="Finished" /></p>
         <input class="hiddenid" type="hidden" value="' . $row['id'] . '" />
         </div>
         </div>
         </li>

         ';
         }
?>






    </ul>
    </div>

EDIT: This is the .sortable() code I’m using to record column and position:

$(document).ready(function {
$("#sortable01, #sortable0, #sortable1, #sortable2, #sortable3, #sortable4").sortable({
connectWith : ".sortable",
items : "li:not(.notsortable)",
receive  : function(event, ui){ 

         var column = $(this).parent().attr('id');
         var index = ui.item.index() + 1;
         var id = $("#"+column+" li:nth-child("+index+") .hiddenid").val();


         $("#"+column+" li:nth-child("+index+") ").addClass('notsortable');

         $.ajax({

                 url: "update_column.php",
                 type:"POST",
                 data: "column="+column+
                       "&id="+id,
                 success: function(){


                           $("#"+column+" li:nth-child("+index+")   ").removeClass('notsortable');

                                      }        

                });

                },

beforeStop : function (event, ui) {



                 $.ajax({

                 url: "update_column_order.php",
                 type:"POST",
                 data: {
                            sort0:$('#sortable0').sortable('serialize'),
                        sort1:$('#sortable1').sortable('serialize'),
                        sort2:$('#sortable2').sortable('serialize'),
                        sort3:$('#sortable3').sortable('serialize')
                       }

                });



                            },







 })
.disableSelection();
  $(".hide").hide();
 });

Answer 1

Reinitialize the sortable functionality on the ajax-replaced elements within load‘s callback:

$('#complete').load('index.php #sortable4', function() {
    $('#sortable4').sortable(options);
});