Friday, February 24th, 2006
Creating sortable lists with PHP and AJAX
Category: PHP, Programming
, Prototype
, UI
ou might have been in a situation before where you had a list of items in your database that needed to be output in a specific order. These items could be anything: perhaps a listing of your favourite movies or your favourite books. For whatever reason, you want them ordered in a custom way that can’t be determined automatically (such as alphabetical).
This article covers the implementation of a system that lets you easily define the order of such a list.
The lists they feature are the drag-and-drop types, created with the help of the Prototype and Scriptaculous libraries. A fully-interactive example of the lists is shown on the first page of the tutorial.
They walk through the creation of the entire setup, both client-side and server-side, deatiling each of these steps along the way:
- the database creation, showing how the table is defined – shown for both MySQL and PostgreSQL
- the PHP code used to generate the list output to the browser via a database layer and two logic/output files
- adding the drag-and-drop capability to the script, via Scriptaculous and some CSS
- writing the PHP script to handle the sorting changes (the script Ajax calls)
- and, finally, working up the Ajax code to be fired off when the user changes the order of the list
Related Content:
This is probably worthy of its own discussion, but are there any drag-and-drop implementations that are also keyboard accessible?
Tutorial for children.
Stephen, Brothercake’s “Docking Boxes” (http://brothercake.com/site/resources/scripts/dbx/) is keyboard accessible.
[...] [ via Ajaxian ] [...]
I could not get the php code to build the list. The table existed with all the row, they show up when doing an echo, but not able to output to the form. Tried Firefox and IE. Beign I’m not familier with PHP, I could use a little help with this.
Thanks,
Dave
“I could not get the php code to build the list. ”
replace:
<li id=”movie_<?= $movie_id ?>”><?= $title ?></li>
with:
<li id=”movie_<?= $movie_id ?>”><?php echo $title; ?></li>
I think I had the same problem as David and fixed it in a similar way (using echo). This seems to cause more problems, though (css wasn’t applied, even though id tag calcualted correctly). The bigger problem is that I’ve got some php code output on the screen (i.e., ignoring the “” tags. I’m using php5, if that matters.
Question 1: Is anone familiar with the strange behavior (and know how to fix it)?
Question 2: Why, exactly, would the original code above work for some people, while others need to use “echo”?
@semibruce. that’s because of the PHP short tag which allows
I’ve messed with this stupid script in a zillion different ways and I can tell you that It DOES NOT WORK!!!
It doesn’t help that half the code is improperly written: missing quotes, semicolons…
Does anyone know of a better, WORKING version of this same idea?