Let’s make sortable lists that remember their order like the ones found in the To-Do lists for 37signals’s Basecamp. With Ajax calls and sortables implemented in Prototype and script.aculo.us, this is just a matter of putting the puzzle pieces together. And for those of you impatient, here’s the final result.

First off, you’ll need the Prototype and script.aculo.us libraries. The documentation is relatively good, especially for Prototype. Include these in your file.

<script type="text/javascript" src="path"></script>

Remember that you need to include Prototype before script.aculo.us, a common first time mistake.

So in this tutorial, we’re going to sort list elements, but technically you could sort anything that the Sortable.create function of script.aculo.us supports.

Make a new list (with an id) and notice specifically the id of the elements. They have to be in the form string_identifier, where identifier is a unique number, for Sortable.serialize to work. You will probably want to retrieve each element from a database where the identifier would be the unique id. Also, your database table should contain a column that saves the order. For this example, we’ll call this column order_column and the list list_to_sort. Creative names. Here’s some pseudocode.

<ul id="list_to_sort">
    // SQL Query: SELECT * FROM table ORDER BY order_column ASC
    // foreach: <li id="item_<? row.id; ?>"><? row.content ?></li>
 
    // The following is the output that would get generated.
    <li id="item_2">Item 2</li>
 
    <li id="item_3">Item 3</li>
    <li id="item_1">Item 1</li>
</ul>

You can insert some entries into your table to check that everything works so far. Next, we’ll liven this up with Sortable.create.

Sortable.create("list_to_sort", {
    onUpdate: function() {
        new Ajax.Request("file_to_call.php", {
            method: "post",
            parameters: { data: Sortable.serialize("list_to_sort") }
        });
    }
});

Okay, let’s break this down. Check the documentation on Sortable.create for more information. The syntax is Sortable.create(id_of_list, parameter_hash); One of the parameters is a callback function onUpdate that is called when the user changes the order of the list and finishes the mouse click. Without this callback, the list will work on the client-side but nothing would be saved. So we’re going to make an Ajax POST request to the file file_to_call.php with the Prototype function Ajax.Request. Again, the documentation contains more useful information. But for here, we’ll need to specify a PHP file, which we will make later to interact with the database. We’ll send it as a POST request with a parameter data, the variable string that contains the current order of the list.

Sortable.serialize creates a string like: list_to_sort[]=2&list_to_sort[]=1&list_to_sort[]=3 where the numbers are the identifier parts of the list element ids after the underscore. Perfect.

Now we need to code file_to_call.php, which will take this string, passed as $_POST[’data’] and execute it.

<?php
parse_str($_POST['data']);
?>

There’s a PHP function you may not have seen before. parse_str parses a strings into variables, somewhat similar to executing the string. So for the above string, parse_str will result in a variable $list_to_sort that contains a 3-element array (2, 1, 3).

Now, all we have to do is update the database so the order is actually saved.

<?php
for ($i = 0; $i < count($list_to_sort); $i++) {
    // SQL Query:
    // UPDATE `table` SET `order_column` = $i WHERE `id` = $list_to_sort[$i]
}
?>

And you’re done! Assuming all went well, your sortable list should remember its order in all its Ajax goodness. Again here’s the working final result for your viewing pleasure. Enjoy.