Sorting Columns of Adoptables

[!Alive]

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:
$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

[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#subm it_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).fa deOut('slow', function(){
$(this).remove();
});
});
$('.sortable_adoptables').sortable('destroy');
$('p#deactivate_sort').attr('id', 'activate_sort');
});
});
</script>



$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?

[fadillzzz]

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


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

[!Alive]

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.

[fadillzzz]

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

if ($this.children('table').length > 1) {
$this.children('table').not(ui.item).appendTo(ui.s ender);
}

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

[!Alive]

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