Edit-in place and AJAX

wiggst3r · July 8, 2008

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.

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

Wolphie · July 8, 2008

There is an Ajax specific forum on this board.

wiggst3r · July 8, 2008

whoops! sorry

Sign In

Edit-in place and AJAX

Recommended Posts

wiggst3r

Link to comment

Share on other sites

Wolphie

Link to comment

Share on other sites

wiggst3r

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information