An outline of what we are trying to achieve:
- Populate list values from a database and render them onscreen
- Use JavaScript to setup the sortable items
- Add a JavaScript callback to the drag/drop pointing to a serialising function to send an AJAX request to the server
- Create a server-side script that loops through the list updating the database with the new order
You will need the prototype library: http://prototypejs.org/
And of course the Scriptaculous library: http://script.aculo.us/downloads
To enable this methodology there are several files:
test.php – contains the list and necessary JavaScript
request.php – necessary to processes our AJAX request
db.inc – a database class that is included in both index.php and request.php to make the connection to the DB and has methods to get the current list and to update the list
Click here to download the necessary example files.
test.php
JavaScript: the call to Event.observe tells the browser to call the init function after the page loads. The init function creates a new sortable list on the listContainer element, setting all divs within it to be sortable and setting the updateList function as a callback whenever the list is updated. This means that when the order of items in the list change, this function will be called with the list element passed as an argument. This function will perform the AJAX request to update the database.
The updateList function sets a variable for the url used during the AJAX request before it calls Sortable.serialize passing the container ID as an argument to serialise the list to a format such as listContainer[]=5, listContainer[]=7, listContainer[]=2
The first three items of the list would be the items 5, 7, and 2 and the divs representing these items would have the following ID values: item_5, item_7, and item_2. This serialised list is set in the variable ‘params’.
Next an AJAX request is opened using Prototype’s Ajax.Request class. It is called with two arguments: the URL and an object with various options. The options include the type of request (POST in this example, parameters to pass the params variable and two functions (onLoading/onLoaded) that handle the showing and hiding of the ‘Updating database…’ div.
Normally in an AJAX request you would also add a callback for onComplete to handle the response from the server, but in this case the AJAX response doesn’t really matter because it is a one way communication in this demo. In a real application you would have more error handling and would need to correctly handle error conditions.
At the footer of the file there is a div with the ID ‘containerDiv’ which is the container for our list. Within this is some PHP that loops through an associative array and prints out each list item as a div with ID ‘item_10’ where 10 is the ID for that record in the database.
request.php
This file begins by calling session_start() to send the right http headers to prevent the file from being cached. Next it instantiates an object and calls the updateList method passing the listContainer variable from the POST request (containing our serialised list).
db.inc
This is a simple db class that connects to the database and has methods to get and update the order of the list. In a ‘real’ application you should have a much cleaner implementation of the database access and would use other DB libraries to connect.
