Mysidia Adoptables Support Forum  

Home Community Mys-Script Creative Off-Topic
Go Back   Mysidia Adoptables Support Forum > Mysidia Adoptables > Questions and Supports

Notices

Reply
 
Thread Tools Display Modes
  #1  
Old 03-18-2012, 04:42 PM
!Alive !Alive is offline
Member
 
Join Date: Feb 2012
Posts: 39
Gender: Male
Credits: 1,053
!Alive is on a distinguished road
Default 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
Reply With Quote
  #2  
Old 03-19-2012, 09:05 AM
fadillzzz fadillzzz is offline
Dev Staff
 
Join Date: Jan 2010
Posts: 501
Gender: Male
Credits: 32,506
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
  #3  
Old 03-19-2012, 02:45 PM
!Alive !Alive is offline
Member
 
Join Date: Feb 2012
Posts: 39
Gender: Male
Credits: 1,053
!Alive is on a distinguished road
Default

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?
Reply With Quote
  #4  
Old 03-20-2012, 01:36 AM
fadillzzz fadillzzz is offline
Dev Staff
 
Join Date: Jan 2010
Posts: 501
Gender: Male
Credits: 32,506
fadillzzz is an unknown quantity at this point
Default

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');
                            }
                        }
                    });
Reply With Quote
  #5  
Old 03-20-2012, 01:34 PM
!Alive !Alive is offline
Member
 
Join Date: Feb 2012
Posts: 39
Gender: Male
Credits: 1,053
!Alive is on a distinguished road
Default

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.
Reply With Quote
  #6  
Old 03-21-2012, 12:45 AM
fadillzzz fadillzzz is offline
Dev Staff
 
Join Date: Jan 2010
Posts: 501
Gender: Male
Credits: 32,506
fadillzzz is an unknown quantity at this point
Default

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.
Reply With Quote
  #7  
Old 03-22-2012, 03:02 PM
!Alive !Alive is offline
Member
 
Join Date: Feb 2012
Posts: 39
Gender: Male
Credits: 1,053
!Alive is on a distinguished road
Default

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

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Creating a "Faction" for adoptables/owned adoptables Vaporman87 Questions and Supports 1 03-04-2014 03:38 PM
Columns after upgrade draugluin Questions and Supports 4 10-22-2012 04:49 AM
Sorting request.... Again. SilverDragonTears Questions and Supports 3 09-16-2012 03:02 AM
Sorting adoptables? (PHP code) Aasixx Questions and Supports 6 03-27-2012 06:10 PM
Choosing Adoptables Type [EASY ADOPTABLES SCRIPT ONLY] Ashje Addons/Mods Graveyard 2 05-24-2009 03:17 AM


All times are GMT -5. The time now is 01:59 PM.

Currently Active Users: 432 (0 members and 432 guests)
Threads: 4,080, Posts: 32,024, Members: 2,016
Welcome to our newest members, jolob.
BETA





What's New?

What's Hot?

What's Popular?


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2024, vBulletin Solutions Inc.
vBCommerce I v2.0.0 Gold ©2010, PixelFX Studios
vBCredits I v2.0.0 Gold ©2010, PixelFX Studios
Emoticons by darkmoon3636