Mysidia Adoptables Support Forum - Sorting Columns of Adoptables

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

- Questions and Supports (http://www.mysidiaadoptables.com/forum/forumdisplay.php?f=18)

- - Sorting Columns of Adoptables (http://www.mysidiaadoptables.com/forum/showthread.php?t=3515)

Sorting Columns of Adoptables

So I am working on having several columns of adoptables shown on the myadopts page instead of just one. And have them be sortable. I have successfully installed the sortable mod. It worked fine with the single row of adoptables. But when I implemented the columns the sorting quit working. I have scanned over the code and believe that the problem stems from having a table inside of the sorting table. Though I haven't the slightest how to go about changing what I have to make it work the way I want. I've tried a few things but they only result in one or the other of the two things(columns and sortablitiy) actually working.

With the below code the columns work but the sorting doesn't.
Here is the code:

PHP Code:


		
			
$article_content = "<p id='activate_sort' style='cursor: pointer'>

        <img src='templates/icons/movepkmbtn.png' />

                                 

                            </p>

                            <table>

                                <tr>

                                    <strong>Your Pokemon</strong></br></br>

                                </tr>

                            </table>

                            <table id='sortable_adoptables'>"; 

        

        

                    

        $query = "    SELECT * 

                    FROM {$prefix}owned_adoptables 

                    LEFT JOIN {$prefix}sort_adoptables 

                        ON {$prefix}owned_adoptables.aid = {$prefix}sort_adoptables.adoptable_id

                    INNER JOIN {$prefix}levels 

                        ON {$prefix}levels.thisislevel = {$prefix}owned_adoptables.currentlevel

                    INNER JOIN {$prefix}adoptables

                        ON {$prefix}owned_adoptables.type = {$prefix}adoptables.type

                    WHERE {$prefix}owned_adoptables.owner = '{$loggedinname}' 

                    AND {$prefix}levels.adoptiename = {$prefix}adoptables.type

                    ORDER BY {$prefix}sort_adoptables.sorting_id";  

                                                        

        $result = runquery($query);

        

        $cols = 3;



        do{

        $article_content .= "<tr>";

        for($i=1;$i<=$cols;$i++){  // All the rows will have $cols columns even if the records are less than $cols

        

        $row = mysql_fetch_array($result);

        if($row) 

        {

            if($row['usealternates'] =='yes')

            { 

                $image = $row['alternateimage']; 

            }

            else

            { 

                $image = $row['primaryimage']; 

            }

            if($row['currentlevel'] == 0)

            { 

                $image = $row['eggimage']; 

            }

            if($image=='')

            { 

                $image = $row['primaryimage']; 

            }

            $article_content .= "

                        <td>

                        <table><tr id='orderaid_{$row['aid']}'>

                                <td><a href='myadopts.php?act=manage&id={$row['aid']}'><img src='{$image}'></a></td>

                                <td><strong>{$row['name']}</strong> the {$row['type']} Pokemon</br>

                                    Gender:<img src='picuploads/{$row['gender']}.png'></br>

                                    Nature:{$row['temperment']}</br>

                                    OT:{$row['ot']}</br>

                                    EXP:{$row['totalclicks']}</br></td>

                                <td width=50%>&nbsp;</td>    <!-- Create gap between columns -->

                            </tr></table></td>";

                                

        }

        

        else{

            $article_content .= "<td>&nbsp;</td>";    //If there are no more records at the end, add a blank column

            }

        }

    } while($row);

        $article_content .= "</table>";

        

        

    }

Thanks in advance for any help. <3

It's possible to do this with a few tweaks in the JavaScript part too and not just the HTML.

Anyway, to start off, first remove the "id" attribute of the sortable table. Thus the outer table will no longer have an id of "sortable_adoptables".

Then, add a class to the "td" of the outer table and make it equal to "sortable_adoptables". After that, take out the "id" attribute of the inner table "tr" elements and assign it to the inner table instead.

You're done with the HTML part. As for the JavaScript side, it might be a little bit too complex to explain, so here's the ready-to-launch JavaScript and PHP + HTML code.

HTML Code:

    <script type="text/javascript">

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

                $('.sortable_adoptables').css('background-color', '#FFFF66').animate({ backgroundColor: realBg },  'slow' ).sortable({ cursor: 'pointer', connectWith: ".sortable_adoptables" });

                $(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 = $.map($('.sortable_adoptables'), function(v, i){

                           return $(v).sortable('serialize');

                });

                data = data.join("&");

                $.post('ajax_sort.php', data, function(result){

                    $('form#submit_order').html(result).delay(5000).fadeOut('slow', function(){

                        $(this).remove();                    

                    });

                });

                $('.sortable_adoptables').sortable('destroy');

                $('p#deactivate_sort').attr('id', 'activate_sort');

            });

        });

    </script>

PHP Code:


		
			
$article_content = "<p id='activate_sort' style='cursor: pointer'>
        <img src='templates/icons/movepkmbtn.png' />
                                 
                            </p>
                            <table>
                                <tr>
                                    <strong>Your Pokemon</strong></br></br>
                                </tr>
                            </table>
                            <table>"; 
        
        
                    
        $query = "    SELECT * 
                    FROM {$prefix}owned_adoptables 
                    LEFT JOIN {$prefix}sort_adoptables 
                        ON {$prefix}owned_adoptables.aid = {$prefix}sort_adoptables.adoptable_id
                    INNER JOIN {$prefix}levels 
                        ON {$prefix}levels.thisislevel = {$prefix}owned_adoptables.currentlevel
                    INNER JOIN {$prefix}adoptables
                        ON {$prefix}owned_adoptables.type = {$prefix}adoptables.type
                    WHERE {$prefix}owned_adoptables.owner = '{$loggedinname}' 
                    AND {$prefix}levels.adoptiename = {$prefix}adoptables.type
                    ORDER BY {$prefix}sort_adoptables.sorting_id";  
                                                        
        $result = runquery($query);
        
        $cols = 3;

        do{
        $article_content .= "<tr>";
        for($i=1;$i<=$cols;$i++){  // All the rows will have $cols columns even if the records are less than $cols
        
        $row = mysql_fetch_array($result);
        if($row) 
        {
            if($row['usealternates'] =='yes')
            { 
                $image = $row['alternateimage']; 
            }
            else
            { 
                $image = $row['primaryimage']; 
            }
            if($row['currentlevel'] == 0)
            { 
                $image = $row['eggimage']; 
            }
            if($image=='')
            { 
                $image = $row['primaryimage']; 
            }
            $article_content .= "
                        <td class='sortable_adoptables'>
                        <table id='orderaid_{$row['aid']}'><tr>
                                <td><a href='myadopts.php?act=manage&id={$row['aid']}'><img src='{$image}'></a></td>
                                <td><strong>{$row['name']}</strong> the {$row['type']} Pokemon</br>
                                    Gender:<img src='picuploads/{$row['gender']}.png'></br>
                                    Nature:{$row['temperment']}</br>
                                    OT:{$row['ot']}</br>
                                    EXP:{$row['totalclicks']}</br></td>
                                <td width=50%>&nbsp;</td>    <!-- Create gap between columns -->
                            </tr></table></td>";
                                
        }
        
        else{
            $article_content .= "<td>&nbsp;</td>";    //If there are no more records at the end, add a blank column
            }
        }
    } while($row);
        $article_content .= "</table>";
        
        
    }

Lemme know how this works out for you.

Thanks, those changes allow the adoptables to be moved between the columns. It dose some weird aligning/snapping or something. When I drag the adoptable to another space it expands the cell to fit both adoptables rather than force the adoptable from that cell into a different one so that only one adoptable is in each space. It just looks a bit messy cause it leaves gaps. Is there an easy way to fix it?

You can add a callback to the receive event and prevent users from putting more than 2 items into the same area. But this might prevent them from sorting if there's no empty space. And if they only have one empty space, it'll probably be a little bit painful to reorder the adoptables

HTML Code:

$('.sortable_adoptables')

                    .css('background-color', '#FFFF66')

                    .animate({ backgroundColor: realBg },  'slow' )

                    .sortable({ 

                        cursor: 'pointer', connectWith: ".sortable_adoptables", receive: function(event, ui) {

                            var $this = $(this);

                            if ($this.children('table').length > 1) {

                                $(ui.sender).sortable('cancel');

                            }

                        }

                    });

I tried using that and it made so that the adoptables wouldn't change positions. They can be dragged but when I drop it it snaps back to where it was.
Is there a way to push them horizontally instead of vertically, wrapping through the table. So like if I grab the first adoptable and drag it over one space the second adoptable moves to the first spot.

I believe the following if statement for callback of the receive event should do the trick.

HTML Code:

if ($this.children('table').length > 1) {

     $this.children('table').not(ui.item).appendTo(ui.sender);

}

Just replace the if statement from my previous post with this one.

That allows the swapping of the adoptables. I like it. <3 Thank you very much for your help. XD