comment system with jquery

offdarip · November 11, 2010

This is a comment script i made some editions to to suit my website and it updates database and shows comment on page when submitted but when you refresh the page or go directly to the comment page it does not show comments.. Any ideas? (and it was doing the same thing before i made the additions) Original Script came from http://www.9lessons.info/2009/09/comment-system-database-with-jquery.html

My Script Below

Table:

//Posts Table
CREATE TABLE posts
(
post_id INT PRIMARY KEY AUTO_INCREMENT,
post_title VARCHAR(200),
post_dis TEXT
);

//Comments Table
CREATE TABLE comments
(
com_id INT PRIMARY KEY AUTO_INCREMENT,
com_name VARCHAR(100),
com_email VARCHAR(100),
com_dis TEXT,
post_id_fk INT,
FOREIGN KEY(post_id_fk) REFERENCES posts(post_id)
);

comment.php

<?php
	session_start();
require_once "scripts/connect_to_mysql.php";

$id = $_SESSION['LOGINID'];


//$post_id value comes from the POSTS table
mysql_query("select * from posts where post_id='$post_id'");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Comments  with jQuery and Ajax</title>
  
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >
$(function() {
$(".submit").click(function()
{
var name = $("#name").val();
var email = $("#email").val();
var comment = $("#comment").val();
var post_id = $("#post_id").val();
var dataString = 'name='+ name + '&email=' + email + '&comment=' + comment+ '&post_id=' + post_id;
if(name=='' || email=='' || comment=='')
{
alert('Please Give Valid Details');
}
else
{
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="ajax-loader.gif" />Loading Comment...');
$.ajax({
type: "POST",
url: "commentajax.php",
data: dataString,
cache: false,
success: function(html){
$("ol#update").append(html);
$("ol#update li:last").fadeIn("slow");
$("#flash").hide();
}
});
}return false;
}); });
</script>
<style type="text/css">
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
.comment_box
{
background-color:#D3E7F5; border-bottom:#ffffff solid 1px; padding-top:3px
}
a
{
text-decoration:none;
color:#d02b55;
}
a:hover
{
text-decoration:underline;
color:#d02b55;
}
*{margin:0;padding:0;}


ol.timeline
{list-style:none;font-size:1.2em;}
ol.timeline li{ display:none;position:relative;padding:.7em 0 .6em 0;}ol.timeline li:first-child{}

#main
{
width:500px; margin-top:20px; margin-left:100px;
font-family:"Trebuchet MS";
}
#flash
{
margin-left:100px;

}
.box
{
height:85px;
border-bottom:#dedede dashed 1px;
margin-bottom:20px;
}
	input
{
color:#000000;
font-size:14px;
border:#666666 solid 2px;
height:24px;
margin-bottom:10px;
width:200px;


}
textarea
{
color:#000000;
font-size:14px;
border:#666666 solid 2px;
height:124px;
margin-bottom:10px;
	width:200px;

}
.titles{
font-size:13px;
padding-left:10px;


}
.star
{
color:#FF0000; font-size:16px; font-weight:bold;
padding-left:5px;
}

.com_img
{
float: left; width: 80px; height: 80px; margin-right: 20px;
}
.com_name
{
font-size: 16px; color: rgb(102, 51, 153); font-weight: bold;
}
</style>
</head>

<body>


<div id="main">
<div style="font-family:'Georgia', Times New Roman, Times, serif; font-size:2.0em; margin-bottom:10px ">
</div>
<div style="font-family:'Georgia', Times New Roman, Times, serif; font-size:1.0em; margin-bottom:10px ">
</div>
<ol id="update" class="timeline">

<?php


$sql=mysql_query("select * from comments where post_id_fk='$post_id'");
while($row=mysql_fetch_array($sql))
{
$name=$row['com_name'];
$email=$row['com_email'];
$comment=$row['com_dis'];
$post_id_fk=$row['post_id_fk'];
$post_id=$row['post_id'];
$lowercase = strtolower($email);

?>


<li class="box">
<img src="members/<?php print $id; ?>/pic1.jpg" class="com_img">
<span class="com_name"> 

<?php echo $name; ?></span> <br />
<?php echo $comment; ?></li>

<?php
}
?>

</ol>
<div id="flash"></div>

<div style="margin-left:100px">
<form action="#" method="post">
<input type="hidden" name="post_id" id="post_id" value="<?php echo $post_id; ?>"/>
<input type="text" name="title" id="name"/><span class="titles">Name</span><span class="star">*</span><br />

<input type="text" name="email" id="email"/><span class="titles">Email</span><span class="star">*</span><br />

<textarea name="comment" id="comment"></textarea><br />

<input type="submit" class="submit" value=" Submit Comment " />
</form>
</div>
</div>
</body>
</html>

commentajax.php

<?php
session_start();

require_once "scripts/connect_to_mysql.php";


$id = $_SESSION['LOGINID'];

if($_POST)
{
$name=$_POST['name'];
$email=$_POST['email'];
$comment=$_POST['comment'];
$post_id=$_POST['post_id'];

mysql_query("insert into posts(post_id) values ('$post_id')"); 
      $post_id = mysql_insert_id();

mysql_query("insert into comments(com_name,com_email,com_dis,post_id_fk) values ('$name','$email','$comment','$post_id')"); 
}

else { 
}

?>
<li class="box">
<img src="members/<?php print $id; ?>/pic1.jpg" class="com_img"/><span  class="com_name">
<?php echo $name;?></span> <br /><br />

<?php echo $comment; ?><br /><br />
</li>

Sign In

comment system with jquery

Recommended Posts

offdarip

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information