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
HTML 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({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');
});