Jump to content

Edit-in place and AJAX


wiggst3r

Recommended Posts

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:

 

Picture2-2.png

 

 

Thanks

 

Link to comment
https://forums.phpfreaks.com/topic/113709-edit-in-place-and-ajax/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.