Adding a delete button to my guestbook

[andrew_biggart]

Ok I am making a simple guestbook for my website and I have got the add comment and read comments working from the same page. The code I am using is as follows.

 

guestbook.php

	<div id="page_content">
	<div>
	<br />
	 <a href="guestbook.php"><img alt="" src="myguestbook.jpg" width="322" height="48" style="float: left" /></a><br />
	<br />
	<br />
	<br />
	</div>
	<table>
	<tr><td><a href="editpost.php">Edit Post</a></td><td>View single post</td><td>Delete a Post</td></tr>
	</table>
	<br />
	<table class="guest_head">
		<tr>
		    <td></td>
		</tr>
	</table>
	<form id="newComment" action="#">
	<table class="guest">
		<tr>
			<td colspan="2" class="guest_please"> </td>
		</tr>
		<tr>
			<td colspan="2" class="guest_please">Please fill in the following fields to submit a comment to my 
			guestbook.</td>
		</tr>
		<tr>
			<td colspan="2" class="guest_please"> </td>
		</tr>
			<tr>
			<td class="nametd">Name :</td>
			<td><input type="text" name="name" class="name"/></td>
		</tr>
		<tr>
			<td class="commenttd" style="width: 100px; height: 15px" valign="top">Comment :</td>
			<td><textarea name="comment" rows="1" cols="20" class="yourcomment"></textarea></td>
		</tr>
		<tr>
			<td colspan="2" class="submit"><input type="submit" value="submit" class="submitinput"/></td>
		</tr>
	</table>
	</form>
	<div id="commentList">

	</div>

	</div>

 

the java script files are....

read.js

<?php
//Set no caching
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
?> 

var guestbook;
window.addEvent('domready', function(){
guestbook = new GuestBook();
});

var GuestBook = new Class({

initialize: function(){
	var req = new Request.JSON({
		url: 'control.php?action=getPage',
		onSuccess: this.success
	}).send();
},

success: function(jArray){
	jArray.each(function(post){
		var post = new PostItem(post.id, post.name, post.comment);
		post.display().inject($('commentList'));
	}, this);
}

});


var PostItem = new Class({	

initialize: function(id, name, comment){
	this.id = id;
	this.name = name;
	this.comment = comment;
},

display: function(){
	var cont = new Element('div',{
		'class':'comment6',
		'id':'post'+this.id
	});
	var title = new Element('h3',{
		'class':'says',
		'text':this.name + ' says...'
	});
	var comment = new Element('p',{
		'class':'comments',
		'text':this.comment
	});

	title.inject(cont);
	comment.inject(cont);
	return cont;
}
});

 

and edit.js

<?php
//Set no caching
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
?> 

window.addEvent('domready',domReady);
function domReady(){
var guestbooklet2 = new GuestBooklet2();
}
GuestBooklet2 = new Class({
initialize: function(){
	$('newComment').addEvent('submit', this.addComment);
},

addComment: function(e){
	e.preventDefault();
	var req = new Request({
		url:'control.php?action=editPost',
		onSuccess:commentAddSuccess
	}).post(this);

	function commentAddSuccess(){
		new Element('span',{
			'class':'status1',
			'text':'Your post has been edited successfully '
		}).inject($('status'));
	}
},


});

 

and the control javascript file is control.js

<?php

require_once 'php/class.GuestBook.php';

$guestbook = new GuestBook('Biggart_GuestbookT');

function insertPost() {
global $guestbook;
return $guestbook->insert($_POST);
}

function editPost() {
global $guestbook;
return $guestbook->update($_POST);
}

function getSinglePost(){
global $guestbook;
return $guestbook->getPost($_GET['id']);
}

function getPage() {
global $guestbook;
return $guestbook->getPostList();
}

function removePost(){
global $guestbook;
return $guestbook->removePost($_GET['id']);
}

echo $_GET['action']();

 

I have now written a delete post page where I enter an id number and it deletes that post. But what i want idealy is and button beside each post so when i click delete it deletes that post. I want all javascript files to run off guestbook.php.

 

this is delete.js

 

<?php
//Set no caching
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
?> 

window.addEvent('domready',domReady);
function domReady(){
var guestbook = new GuestBook();
}
GuestBook = new Class({
initialize: function(){
	$('newComment').addEvent('submit', this.addComment);
},

addComment: function(e){
	e.preventDefault();
	var req = new Request({
		url:'control.php?action=removePost&id=' + this.id.value,
		onSuccess:commentAddSuccess
	}).send();

	function commentAddSuccess(){
		new Element('span',{
			'text':'deleted item'
		}).inject($('newComment'));
	}

});

 

Can anyone point me in the right direction as I am a complete novice at Ajax thanks