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

[fadillzzz]

Oh and btw, I just noticed that when you click on 'Click here to sort your adoptables' the table somehow gets aligned to the left a little bit more.
If you're wondering how to fix that, I think the following code should do the trick

    $(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({backgroundColor: '#FFFF66', paddingRight: '0'}).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');
        });