I do this in quite a few sites that I work on. The Scriptaculous
library has a very neat system called Sortable which does the hard
part. You can test this out in Freeway by adding the Protaculous
Action to your page, setting the Library picker to scriptaculous,
making a list on your page, and pasting the following code into the
first Function Body dialog in Protaculous:
var myList = $('nameOfTheBoxYourListIsIn').down('ul');
Sortable.create(myList,{});
Change the long-winded box name above to be the actual name of the
HTML box containing the list as noted in the Title field in Freeway’s
inspector.
That’s it – preview in a browser, and you will be able to drag the
list items around to change their order. But that’s all it will do, if
you refresh the page, the list will be back where it started.
So to take care of that problem, we need to make some changes to your
database to support this method.
In your database, add a column to your table to hold the ordering
information. I usually use an int(4) or something like that, called
position. (The name is not important.)
Make sure that your regular display code uses that column as its
primary sort order. Also make sure that each row of your database has
a numeric ID column.
Now make a new script which can access your database and accept a
POST, and write to the database. My example, which follows, is quite
terse because the framework I use does all the heavy lifting. Where
you see $item->save(), take that to mean the usual five lines of code
to update a MySQL database from PHP.
<?php
require_once('config.inc.php');
include(APP_ROOT . '/models/people_model.php');
include(APP_ROOT . '/models/stories_model.php');
if(isset($_COOKIE['c2'])){
if($session = ActiveRecord::FindFirst('people','session = "' .
$_COOKIE['c2'] . '" AND role IN ("author","admin")')){
foreach($_POST['sort_list'] as $k=>$v){
if($item = ActiveRecord::FindById('stories',$v)) {
$item->position = $k+1;
$item->save();
}
}
}
}
print 'finished';
?>
So this script, which sits separate from the rest of your site, is
what the JavaScript library will contact to update the database with
the latest sort order. We’ll send a call to this script every time a
drag event finishes. That way, the database will always be up-to-date
with the current state of your page. In this example, I’ve named this
script ‘ajax_update_order.php’.
Now, the JavaScript to make this go:
document.observe('dom:loaded',function(){
$('message').hide();
Sortable.create('sort_list',{
onUpdate: function(){
new Ajax.Request('ajax_update_order.php',{
parameters: Sortable.serialize('sort_list'),
evalScripts:true,
onCreate: function(transport){
$('message').show().update('<img src="Resources/spinner.gif"
height="16" width="16" alt="" />');
},
onComplete: function(transport){
$('message').update('Changes saved!');
new Effect.Highlight('message');
new Effect.Fade('message',{delay:1});
}
})
}
});
});
The first line of this script sets up a “listener” that waits until
the entire page structure has loaded into memory, then fires the rest
of the script. The next line hides a DIV called ‘message’, which is
where I will update the user with the progress of the script. The next
line takes an unordered list with the ID ‘sort_list’ and makes it
sortable. And the nested functions after that define what will happen
when that list is sorted. onUpdate is an event that fires when the
list has been sorted. When it does, we will send a form request using
Ajax.Request to the ajax_update_order.php script. That script will
receive a POST body containing a variable named the same as your
list’s id, which will be an array of the list item IDs in the order in
which they appear on the page. This array is generated by the
Sortable.serialize function in the JavaScript – note that it also
takes the name of the list as an argument. If you look at the PHP
block above, you’ll see how this POST gets written back to the database.
The only wrinkle to this part of the process is that you must give
each list item in your UL an unique ID, and that ID must follow this
naming convention:
someString_N
…where someString is just any bit of text you like (since IDs cannot
begin with numerals), and the one and only underscore in the ID is
followed by the numerical ID of the database row that the list item
contains.
<li id="p_60">The Circle</li>
Since you are already writing out the list from your database, this
shouldn’t be anything too challenging to add to your current output
code.
The two functions within the Ajax.Request body are there to manage the
user interface. The first is fired when the request is sent to the
server, and updates the message DIV with a spinning graphic to show
that something is happening. The second happens after the update has
been processed, and sets a message saying that the change has been
committed to the database, and then fades that message away.
I’ll write some more about this later, but this should get you chewing
on a solution for now.
Walter
On Dec 14, 2008, at 11:11 AM, Egill Sigurdur wrote:
I have a MySQL based table in my website with some info. I would
like to be able to reorder them with JavaScript and then I would
simply hit Submit and then some PHP code would put that in the
database.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options