Friday, February 24th, 2006

Creating sortable lists with PHP and AJAX

Category: PHP, Programming, Prototype, UI

> phpRiot has posted a tutorial that pairs PHP and Ajax together (the perfect combination?) to create sortable lists.

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:

Posted by Chris Cornutt at 11:16 am
9 Comments

+++--
3.7 rating from 140 votes

9 Comments »

Comments feed TrackBack URI

This is probably worthy of its own discussion, but are there any drag-and-drop implementations that are also keyboard accessible?

Comment by Stephen Clay — February 24, 2006

Tutorial for children.

Comment by Tony — February 25, 2006

Stephen, Brothercake’s “Docking Boxes” (http://brothercake.com/site/resources/scripts/dbx/) is keyboard accessible.

Comment by Josh — February 25, 2006

[...] [ via Ajaxian ] [...]

Pingback by web.develop — February 27, 2006

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

Comment by David Allen — February 27, 2006

“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>

Comment by pbringetto — March 2, 2006

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

Comment by semibruce — March 30, 2006

@semibruce. that’s because of the PHP short tag which allows

Comment by Rudy Luiten — November 20, 2006

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?

Comment by mak — February 23, 2007

Leave a comment

You must be logged in to post a comment.