Sorting Columns of Adoptables

[fadillzzz]

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.

    <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.

[!Alive]

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?