View Single Post
  #2  
Old 03-19-2012, 09:05 AM
fadillzzz fadillzzz is offline
Dev Staff
 
Join Date: Jan 2010
Posts: 501
Gender: Male
Credits: 32,863
fadillzzz is an unknown quantity at this point
Default

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.
Reply With Quote