Mysidia Adoptables Support Forum - [Updated] AJAX Sortable Adoptables on "myadopts.php" Page

Mysidia Adoptables Support Forum (http://www.mysidiaadoptables.com/forum/index.php)

- Mys v1.2.x Mods (http://www.mysidiaadoptables.com/forum/forumdisplay.php?f=38)

- - [Updated] AJAX Sortable Adoptables on "myadopts.php" Page (http://www.mysidiaadoptables.com/forum/showthread.php?t=2357)

yea, because when someone has a lot it's hard to see what you want to drag where

I'm not sure. The documentation doesn't explain any theming for the "sortable" interactions.
But I think you can add '.ui-sortable-placeholder' to your stylesheet and give it some properties to style it to your liking.

Ok thanks! The sorting in itself is just wonderful! Thanks so much for it!

hmm what do I edit to style the table? Having some issues with it and I'm not familiar with JS.

If you want to edit the table body.
Just make a CSS rule with the selector 'tbody.ui-sortable'

like this:

tbody.ui-sortable {
color: #000;
width: 100%;
}

cause that didn't work

nm... it would help if i added <tbody> to it =p

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.

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

        });

        

    });

I did it but I don't see a difference.

You sure? that code above should preserve your table background now...instead of changing it to white :BIGO:

Ahhh that's what it is =) Love it!