This section contains the detail about how to add Comment Using JQuery Ajax & PHP
Add Comment Using JQuery Ajax & PHP
In this section, you will learn how to add comment & display it on the same page. The display comments can also be deleted from here. You just need to click on the cross image near each comment to delete the comment.
We have used JQuery Ajax to submit content. The given below example will give you a clear idea, how to use it :
Example :
In this example, a comment from is given, which contains text area for comment and at right side it displays the comment submitted so far.
When you click on the "Add comment" button, it will send data using Ajax to the displayComment.php, which have script to insert it first and then to display it on the right side of the comment box. The displayComment.php also contains the script for handling delete operation. When you click on the cross image it will send the id of the comment through Ajax to the deleteComment.php page. This page hold the PHP script to delete the comment from the database.
We have used following three PHP code files for this example :
commentForm.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<TITLE> Comment Form with jQuery & PHP</TITLE>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
//When the button with an id of submit is clicked (the submit button)
$("#submit").click(function(){
//Retrieve the contents of the textarea (the content)
var formvalue = $("#content").val();
//Build the URL that we will send
var url = 'submit=1&content=' + escape(formvalue);
//Use jQuery's ajax function to send it
$.ajax({
type: "POST",
url: "displayComment.php",
data: url,
success: function(){
//If successful , notify the user that it was added
$("#msg").html("<p class='add'><b>Just Added Comment:</b><i>" +formvalue+"</i></p>");
$("#content").val('');
comment();
}
});
//We return false so when the button is clicked, it doesn't follow the action
return false;
});
comment();
});
function comment(){
$.ajax({
url: "displayComment.php",
cache: false,
success: function(html){
$("#comment").html(html);
}
});
}
</script>
<body>
<table border="0" width="600px" cellpadding="0" cellspacing="0" align="center">
<tr>
<th colspan="2">
<h2>Comment Form with PHP & jQuery</h2>
</th>
</tr>
<tr valign="top">
<td width="50%">
<h2>Add New Comment :</h2>
<form >
<textarea name="content" id="content" cols="30" rows="3"></textarea> <br />
<input type="submit" id="submit" name="submit" value="Add comment" />
</form>
<div class="msg" id="msg"></div>
</td>
<td width="50%">
<h2>Added Comments:</h2>
<div id="comment"></div>
</td>
</tr>
</table>
</body>
</HEAD>
<BODY>
</BODY>
</HTML>
displayComment.php
<?php
//Connect to the database
$connection = mysql_connect('192.168.10.13', 'root' , 'root') or die(mysql_error());;
$selection = mysql_select_db('commentdb', $connection);
if(isset($_POST['submit'])){
$content = $_POST['content'];
//Insert the content into database
$ins = mysql_query("INSERT INTO commenttable (content) VALUES ('$content')");
//Redirect the user back to the index page
header("Location:commentForm.php");
}
/*Doesn't matter if the form has been posted or not, show the latest posts*/
//Find all the notes in the database and order them in a descending order (latest post first).
$find = mysql_query("SELECT * FROM commenttable ORDER BY id DESC");
//Setup the un-ordered list
echo '<table border="0" cellpadding="5" cellspacing="0" class="list" width="100%">';
//Continue looping through all of them
while($row = mysql_fetch_array($find)){
//For each one, echo a list item giving a link to the delete page with it's id.
echo '<tr><td valign="middle" width="90%">' . $row['content'].' </td>
<td valign="middle" width="10%"><form>
<input class="comment_id" name="comment_id" type="hidden" value="' . $row['id'] . '" />
<input class="comment_content" name="comment_content" type="hidden" value="'.$row['content'].'"/>
<input type="image" src="images/delete.png" class="delete" name="delete" width="20px" />
</form>
</td></tr>';
}
//End the un-ordered list
echo '</table>';
?>
<script type="text/javascript">
$(".delete").click(function(){
//Retrieve the contents of the textarea (the content)
var comment_id = $(this).parent().find(".comment_id").val();
var comment_content = $(this).parent().find(".comment_content").val();
//Build the URL that we will send
var url = 'submit=1&id=' + comment_id;
//Use jQuery's ajax function to send it
$.ajax({
type: "POST",
url: "deleteComment.php",
data: url,
success: function(){
//If successful , notify the user that it was added
$("#msg").html("<p class='remove'><b>Deleted Comment :</b><i>" + comment_content + "</i></p>");
$("#content").val('');
comment();
}
});
//We return false so when the button is clicked, it doesn't follow the action
return false;
});
</script>
deleteComment.php
<?php
//Connect to the database
$connection = mysql_connect('192.168.10.13', 'root' , 'root') or die(mysql_error());;
$selection = mysql_select_db('commentdb', $connection);
//delete.php?id=IdOfPost
if(isset($_POST['submit'])){
echo $id = $_POST['id'];
//Delete the record of the post
$delete = mysql_query("DELETE FROM commenttable WHERE `id` = '$id'");
//Redirect the user
header("Location:commentForm.php");
}
?>
Output :
Before submitting comment, the from will look like this :
After submission, it will look like this :
If you click on the cross button in front of comment, like we are going to click cross of "Good Work Mate" comment, it will look like this after deletion of this comment :
[ 0 ] Comments