Hi
I'm trying to implement an edit-in place functionality to a script i have.
The script so far, takes information from a database, and outputs this as a drag and drop table. (i.e. each row in the image below, can be dragged and dropped, which updates the priority number)
What I'm looking to do, is to be able to edit a row and save the changes, which updates the database details and also, a way of deleting a row, if it's no longer needed.
The script currently uses both prototype and scriptaculous javascript frameworks.
My code so far:
<?
require('db.php');
$demo = new SortableExample();
$list = $demo->getList();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Online Priority List - <?php echo date("l F j Y");?></title>
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style_ie7.css">
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="style_ie6.css">
<![endif]-->
<script src="js/prototype.js"></script>
<script src="js/scriptaculous.js"></script>
<script>
Event.observe(window,'load',init,false);
function init() {
Sortable.create('listContainer',{tag:'div',onUpdate:updateList});
}
function updateList(container) {
var url = 'ajax.php';
var params = Sortable.serialize(container.id);
var ajax = new Ajax.Request(url,{
method: 'post',
parameters: params,
onLoading: function(){$('workingMsg').show()},
onLoaded: function(){$('workingMsg').hide()}
});
}
</script>
</head>
<body>
<h2>Online Priority List - <?php echo date("l F j Y");?></h2>
<table>
<td class="briefed">Briefed By:</td>
<td class="job">Job No.</td>
<td class="category">DIGITAL</td>
<td class="needed">Needed By:</td>
<td class="status">Status</td>
<td class="priority">Priority</td>
</table>
<div id="listContainer">
<?
foreach($list as $item)
{
?>
<div id="item_<?=$item['catid'];?>"><p class="briefed"><?=$item['briefed'];?></p><p class="job_number"><?=$item['job'];?></p><p class="category"><?=$item['category'];?></p><p class="needed"><?=$item['needed'];?></p><p class="status"><?=$item['status'];?></p><p class="order_id"><?=$item['orderid'];?></p></div>
<?
}
?>
</div>
<div id="workingMsg" style="display:none;">Updating database...</div>
<a href="addRow.php"><img src="images/add_button.jpg" height="30" border="0"/></a>
</body>
</html>
<?
session_start();
require_once('db.php');
$demo = new SortableExample();
$demo->updateList($_POST['listContainer']);
?>
An image of what it looks like can be found below:

Thanks