[Updated] AJAX Sortable Adoptables on "myadopts.php" Page
 

--- Unimportant Stuff ---

It's been a while since the last time I made a mod. So, forgive me if this mod is a bit buggy.

I made this mod regarding to this thread. I've been wanted to make this mod actually, it's just that for some reason I don't think it's going to worth the time.

Anyway, this mod is far from perfect. Especially in the javascript part. Those of you who knows javascript and jQuery very well, do not hesitate to suggest me better code. (The same thing goes for PHP XD)

I hope you'll find this mod very useful and nice. Otherwise, I'd probably shoots myself.

Bug fixed:

• Fixed a bug where the $_POST variable keys are modified.
• Trading adoptables can cause duplicate entries in the sorting tables.

--- /Unimportant Stuff ---

--- The REAL Stuff ---

MySQL
1. Make a new table in the database.
This should make your life easier

Code:

---

CREATE TABLE IF NOT EXISTS `adopts_sort_adoptables` (
  `user_id` int(11) NOT NULL,
  `adoptable_id` int(11) NOT NULL,
  `sorting_id` int(11) NOT NULL,
  PRIMARY KEY (`adoptable_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

---

PHP
1. Open inc/functions.php

Go to line 46 and find this code

PHP Code:

---

$_POST = array_map('secure',$_POST); 


---

And replace it with

PHP Code:

---

array_map('secure', $_POST, array_keys($_POST)); // Values are assigned back in secure() 


---

After that, find the secure() function. It's on line 159, and it look something like this

PHP Code:

---

function secure($data) {

    //This function performs security checks on all incoming form data
    
    if(is_array($data)) {

        die("Hacking Attempt!");

    }
    
    $data = htmlentities($data);

    $data = mysql_real_escape_string($data);

    $data = strip_tags($data, '');
    

     return $data;

} 


---

Now let's modify that function by replacing it with this new one

PHP Code:

---

function secure($data, $key = NULL) {

    //This function performs security checks on all incoming form data
    if ($key === 'orderaid')
    {
            //var_dump($data);    var_dump($key); die;
        foreach($data as $dataKey => $dataVal)
        {
            $data[$dataKey] = abs(intval($dataVal));
        }
            //var_dump($data);die;
        return $data;
    }
    
    if(is_array($data)) {

        die("Hacking Attempt!");

    }
    
    $data = htmlentities($data);

    $data = mysql_real_escape_string($data);

    $data = strip_tags($data, '');
    
    if ($key === NULL)
    {
        return $data;
    }
    
    $GLOBALS['_POST'][$key] = $data;

} 


---

2. Open myadopts.php

Go to line 18, and we'll do a little bit of modifying the HTML here. Feel free to modify the HTML to your liking if you know what you're doing. I suggest that you modify it later when you're finished installing this mod.
Find the following code

PHP Code:

---

        $article_content = "<table>
                                <tr>
                                    <th></th><th>Name and Type</th><th>Image</th><th>Clicks</th>
                                </tr>"; 


---

Replace that code with

PHP Code:

---

        $article_content = "<p id='activate_sort'>
                                 Click here to sort your adoptables
                            </p>
                            <table>
                                <tr>
                                    <th></th><th>Name and Type</th><th>Image</th><th>Clicks</th>
                                </tr>
                            </table>
                            <table id='sortable_adoptables'>"; 


---

On line 28, find a query that look like this

PHP Code:

---

        $query = "SELECT * FROM {$prefix}owned_adoptables, 
                                {$prefix}adoptables, 
                                {$prefix}levels WHERE     {$prefix}owned_adoptables.owner = '{$loggedinname}' 
                                                        AND {$prefix}adoptables.type = {$prefix}owned_adoptables.type 
                                                        AND {$prefix}levels.thisislevel = {$prefix}owned_adoptables.currentlevel 
                                                        AND {$prefix}levels.adoptiename = {$prefix}adoptables.type 
                                                        ORDER BY {$prefix}owned_adoptables.totalclicks"; 


---

Replace that whole code with this one

PHP Code:

---

        /*
        $query = "SELECT * FROM {$prefix}owned_adoptables, 
                                {$prefix}adoptables, 
                                {$prefix}levels WHERE     {$prefix}owned_adoptables.owner = '{$loggedinname}' 
                                                        AND {$prefix}adoptables.type = {$prefix}owned_adoptables.type 
                                                        AND {$prefix}levels.thisislevel = {$prefix}owned_adoptables.currentlevel 
                                                        AND {$prefix}levels.adoptiename = {$prefix}adoptables.type 
                                                        ORDER BY {$prefix}owned_adoptables.totalclicks";
        */
        
        $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"; 


---

Go to line 70 or something and look for this code

PHP Code:

---

            $article_content .= "<tr>
                                    <td><img src='picuploads/{$row['gender']}.png'></td>
                                    <td><em>{$row['name']}</em> the {$row['type']}</td>
                                    <td><a href='myadopts.php?act=manage&id={$row['aid']}'><img src='{$image}'></a></td>
                                    <td>{$row['totalclicks']}</td>
                                </tr>"; 


---

Replace it with this

PHP Code:

---

            $article_content .= "<tr id='orderaid_{$row['aid']}'>
                                    <td><img src='picuploads/{$row['gender']}.png'></td>
                                    <td><em>{$row['name']}</em> the {$row['type']}</td>
                                    <td><a href='myadopts.php?act=manage&id={$row['aid']}'><img src='{$image}'></a></td>
                                    <td>{$row['totalclicks']}</td>
                                </tr>"; 


---

3. Upload ajax_sort.php (file is attached)

HTML and Javascript
1. Open your HTML template file. (The default one is template/elements/template.html)

Now, for this part, there are a few choices of doing it. But first, make sure that you have jQuery and jQuery UI running in your page.
Either by downloading them and uploading them to your server or just use the CDN service.
In this tutorial I'll be using the CDN hosted jQuery and jQuery UI.
So anyway, in the HTML template, inside the <head> tag put code

HTML Code:

---

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<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>';
            $('table#sortable_adoptables').css('background-color', '#FFFF66').animate({ backgroundColor: realBg },  'slow' ).find('tbody').sortable({ cursor: 'pointer' });
            $(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 = $('table#sortable_adoptables tbody').sortable('serialize');
            $.post('ajax_sort.php', data, function(result){
                $('form#submit_order').html(result).delay(5000).fadeOut('slow', function(){
                    $(this).remove();                   
                });
            });
            $('table#sortable_adoptables tbody').sortable('destroy');
            $('p#deactivate_sort').attr('id', 'activate_sort');
        });
});
</script>

---

That's it! You can now go to your myadopts.php page and then click on 'Click here to sort your adoptables', after that the adoptables list will be sortable. I hope I didn't miss anything while writing this.
Also, I've attached the files I used in my development environment. If you haven't modified ANY file (i.e. fresh installation) you can just download all the files attached to this post

P.S: You can take advantage of this mod to order the adoptables in other pages such as profile page with some modification to the query.
--- /The REAL Stuff ---

This is amazing, I have to say. Glad to see you create a script with both PHP and Javascript, the code looks quite professional and I am sure people will like it.

My sort your adoptables link isn't clickable....

@HoF
Thanks. I actually have a plan to make more mods that take will take the advantages of AJAX.

@SilverDragonTears
Post your javascript code and myadopts.php here. Also, be sure to remember that you've included the jQuery and jQuery UI .js file in the page.

template.html

myadopts.php

Try this for your myadopts.php