DotDragnet
May 23, 2012, 02:48:03 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: follow us on twitter @dotdragnet
 
   Home   Help Search Login Register  
Pages: [1]   Go Down
  Print  
Author Topic: AJAX edit-in place and PHP  (Read 739 times)
pseudo-nym
Full Member
***
Posts: 179



View Profile Awards
« on: July 08, 2008, 10:43:28 AM »

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:

Code:
<?
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>

Code:
<?
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
Logged
Pages: [1]   Go Up
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2006-2008, Simple Machines Valid XHTML 1.0! Valid CSS!