Sortable function when content is updated via ajax

Question

I have a list that is populated via ajax. This list I can add and delete items via ajax and also sort them. I have two issues with it.

The first one is here and it's still unresolved: https://stackoverflow.com/questions/6370213/jquery-dynamic-dragn-drop-doesnt-update-order (after sorting the list the number of the items that come from the database won't update until I refresh)

The second one is worse. After I update the contents on my list via ajax (say I add a new item), the sortable function stops working until I reload the page. It seems .live won't work with sortable and I'm out of ideas with this one. I'll add some of my code:

My list goes like this:

<ul id="listaruta">
   <li> ... </li>
</ul>

My script for sorting items:

    $(function() {
    $("ul#listaruta").sortable({ 
        opacity: 0.6, 
        cursor: 'move', 
        update: function() {
            var order = $(this).sortable("serialize") + '&action=updateRecordsListings'; 
            $.post("/plugins/drag/updateDB.php", order);                                                             
    }                                 
    });
});

I'm using this for the sorting function: http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/

Answer 1

After searching a lot more I found this to be my answer: jQuery live and sortable

This is what I added to my code to make it work:

    $(document).ajaxSuccess(function() {

    $("ul#listaruta").sortable({
        opacity: 0.6, 
        cursor: 'move', 
        update: function() {
            var order = $(this).sortable("serialize") + '&action=updateRecordsListings'; 
            $.post("/plugins/drag/updateDB.php", order);
        }
    });
});