[Updated] AJAX Sortable Adoptables on "myadopts.php" Page

[fadillzzz]

Perhaps you should update your javascript code to this one. This will achieve what I actually wanted to make, the first javascript code I provided has a "defect" even though if you have different layout and styling the result might actually be what I expected. Nevertheless, please do try this one and see if you like it better. Otherwise, just revert back to the old javascript code.

    $(document).ready(function(){
        
        $('body').undelegate('click').delegate('p#activate_sort', 'click', function(){
            var realBg = $('table#sortable_adoptables').css('background-color');
            var submitForm = '<form name="submit_order" id="submit_order" action="" method="post"><fieldset><label for="submit">Submit Changes</label><input type="submit" id="submit" value="Submit"></fieldset></form>';
            $('table#sortable_adoptables').css('background-color', '#FFFF66').animate({ backgroundColor: realBg },  'slow' ).find('tbody').sortable({ cursor: 'pointer' });
            $(submitForm).insertAfter('p#activate_sort').hide().slideDown();
            $('p#activate_sort').attr('id', 'deactivate_sort');
        });
        
        $('body').undelegate('submit').delegate('form#submit_order', 'submit', function(event){
            event.preventDefault();
            var data = $('table#sortable_adoptables tbody').sortable('serialize');
            $.post('ajax_sort.php', data, function(result){
                $('form#submit_order').html(result).delay(5000).fadeOut('slow', function(){
                    $(this).remove();                    
                });
            });
            $('table#sortable_adoptables tbody').sortable('destroy');
            $('p#deactivate_sort').attr('id', 'activate_sort');
        });
        
    });