Sort function when updating content via ajax

I have a list that is populated via ajax. In this list, I can add and remove items via ajax, and also sort them. I have two problems.

The first one is here and it is still not resolved: https://stackoverflow.com/questions/6370213/jquery-dynamic-dragn-drop-doesnt-update-order (after sorting the list, the number of elements coming from the database will not be updated as long as I update)

The second is worse. After I refresh the content in my list via ajax (say, add a new item), the sorted function stops working until I reload the page. It seems that .live will not work with sorting, and I have no idea with this. I will add the code:

My list is as follows:

<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 use this for the sort function: http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/

+5
source share
1 answer

After a multi-valued search, 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);
        }
    });
});
+7
source

All Articles