Jump to content

PHP/MySQL/AJAX Comment Script

RyanMinor

By RyanMinor
in Javascript Help

 Share

Recommended Posts

RyanMinor Member

RyanMinor

Posted
Posted

Hi everyone, I have been trying to combine two tutorials into one page to produce a page that shows a video, allows a YouTube-style rating with a comment feature. I have the rating feature working properly (except for the fact that the page jumps to the top every time someone rates a video), but the comment script is not working. Everytime I try in submit a comment, I get the error "Pleas enter some text". This error is the check that I am performing to make sure the content text area contains text. The problem is that I am getting that error all the time. My code is below. Any ideas/solutions are greatly appreciated.

 

<?php 
// CONNECT TO DATABASE //
require_once('../connections/conndb.php');
mysql_select_db($database_conndb, $conndb);

// GET VIDEO CLIP //
$clip_id = mysql_real_escape_string($_GET['clipid']);
$sql_clip = mysql_query(
"SELECT clipid, clipname 
FROM tblmembervideoclip 
WHERE clipid = '$clip_id'", $conndb) or die(mysql_error());
$data_clip = mysql_fetch_assoc($sql_clip);
$clip = $data_clip['clipname'];

$sql_comments = mysql_query(
"SELECT comments_id, comments_content, comments_clipid 
FROM comments 
WHERE comments_clipid = $clip_id 
ORDER BY comments_id DESC");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../flowplayer/flowplayer-3.2.2.min.js"></script>
<script type="text/javascript" src="../scripts/jquery.js"></script>
<script type="text/javascript">
// function to submit comments in real time
$(function() {
$(".submit").click(function() {
	// apply form elements to variables
	var content = $("#content").val();
	var clip_id = $("#clip_id").val();
	// build data
	var data_String = {
		'content': content,
		'clip_id': clip_id
	}
	if (content == '') {// if content element is empty, tell the user to type something
		alert("Please Enter Some Text");
	} else { // else, lets apply and add the comment
		// display temp loading
		$("#flash").show();
		$("#flash").fadeIn(400).html('<img src="../images/ajax-loader.gif" align="absmiddle"> <span class="loading">Loading 

Comment...</span>');
		// do ajax post and fetch new comment
		$.ajax({
			type: "POST",
  				url: "demo.php",
   				data: data_String,
  				cache: false,
  				success: function(html) {
				$("ol#update").prepend(html);
  					$("ol#update li:first").slideDown("slow");
				document.getElementById('content').value='';
				$("#flash").hide();
			}
			});
	}
	return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".like").click(function() {
	var id=$(this).attr("id");
	var name=$(this).attr("name");
	$("#votebox").slideDown("slow");
	var dataString = 'id='+ id + '&name='+ name;

	$("#flash").fadeIn("slow");

	$.ajax ({
		type: "POST",
		url: "rating.php",
		data: dataString,
		cache: false,

		success: function(html) {
			$("#flash").fadeOut("slow");
			$("#content_two").html(html);
		} 
	});
});
$(".close").click(function() {
$("#votebox").slideUp("slow");
});
});
</script>
</head>
<body>

<?php include ('logo.php'); ?>

<hr />

<!--BEGIN HEADER--><div id="header">
<?php include ('menu.php'); ?>
</div><!--END HEADER-->

<!--BEGIN PAGE--><div id="page">

<!--BEGIN CONTENT--><div id="content">

<!--BEGIN POST--><div class="post">
<h2 class="style3">Video</h2>

<!--BEGIN ENTRY--><div class="entry">

<table width="475" border="0" cellpadding="5" cellspacing="0">
<tr>
<td width="150" align="right" class="close">LIKE THIS VIDEO?</td>
<td width="75" align="center"><a href="#" class="like" id="<?php echo $clip_id; ?>" name="up"><img src="../images/like.png" height="50" border="0" 

/></a></td>
<td width="75" align="center"><a href="#" class="like" id="<?php echo $clip_id; ?>" name="down"><img src="../images/dislike.png" height="50" border="0" 

/></a></td>
</tr>
</table>

<!--BEGIN VOTEBOX--><div id="votebox">
<span id='close'><a href="#" class="close" title="Close This"><img src="../images/up.png" /></a></span>
<!--<div id="flash">Loading...</div>-->
<div id="content_two"></div>
</div>
  
<!--BEGIN FLOWPLAYER--><div align="center">
<a href=<?php echo "videos/".$clip; ?> style="display: block; width: 640px; height: 480px;" id="player"></a>
<script language="JavaScript">
flowplayer("player", "../flowplayer/flowplayer-3.2.2.swf", {
version: [9, 115],
clip: {
	scaling: "orig",
	autoPlay: false
}
});
</script>
</div><!--END FLOWPLAYER-->

<p align="center">Post a Comment</p>

<div align="center">
<table cellpadding="0" cellspacing="0" width="500px">
<tr>
<td>

<div align="left">
<form  name="comment" method="post" action="">
<table cellpadding="0" cellspacing="0" width="500px">
<tr>

<td style="padding:4px; padding-left:10px;" class="comment_box">
<textarea cols="30" rows="3" style="width:480px;" name="content" id="content" maxlength="250" >
</textarea>
<br />
<p align="center"><input type="submit" value="Post Comment" id="submit" name="submit" style="width: 100px;" class="submit"/>
  <input name="clip_id" type="hidden" id="clip_id" value="<?php echo $clip_id;?>" />
</p>
</td>

</tr>
</table>
</form>
</div>

<br />

<div id="flash" align="left"></div>
<ol id="update" class="timeline"></ol>

<?php while ($row = mysql_fetch_assoc($sql_comments)) {
$msg_id = $row['comments_id'];
$msg = $row['comments_content'];
?>
<div class="bar<?php echo $msg_id; ?>" style="border-top: 1px solid #000000;  padding: 10px 0 10px 0; background-color: #D3E7F5;">
	<div align="left">
		<span style="padding:10px"><?php echo nl2br(stripslashes($msg)); ?></span>
	</div>
</div>
<?php } ?>

</td>
</tr>
</table>
</div>

</div>
<!--END ENTRY-->

</div><!--END POST-->

</div><!--END CONTENT-->

<!--BEGIN SIDEBAR--><div id="sidebar">
<ul>
<li>
<h2 align="center"><span class="style1"><strong></strong></span>Store Items...</h2>
<?php include ('storepromo.php'); ?>
</li>
</ul>
</div><!--END SIDEBAR-->

<div style="clear: both;"> </div>

</div><!--END PAGE-->

<?php include ('footer.php'); ?>

</body>
</html>

Link to comment
https://forums.phpfreaks.com/topic/222462-phpmysqlajax-comment-script/
Share on other sites
theverychap Newbie

theverychap

Posted
Posted

Change:

 

The reason you are getting "Please enter some text" is:

 

You have two elements in your code with the ID of "content".

 

So your javascript is trying to get the val() of the DIV, not the TEXTAREA.

 

---

To stop the page flying to the top when people press "like":

 

<a href="#" class="like" id="<?php echo $clip_id; ?>" name="down">

to:

 

<a href="javascript:void(0);return false;" class="like" id="<?php echo $clip_id; ?>" name="down">

 

 

Hope thats helped :)

  • 2 weeks later...
RyanMinor Member

RyanMinor

Posted
  • Author
Posted

I got my comment/rating script working with some help. Now, I want to add in a Twitter/Facebook style "Show More Comments" button to show only 5 comments at a time. I have it working properly except for a few things:

 

1) When the last of the comments are reached, I want the "Show More Comments" button to display "No More Comments", but for some reason it won't work.

 

2) Ever since I added the pagination code into my page, the newest added comments now display at the bottom of the five initially displayed comments. They should show up at the top as they were before I added the pagination code. I can't figure out why the pagination code would have changed this.

 

Video Page...

<?php 
// CONNECT TO DATABASE //
require_once('../includes/mysql.php');
mysql_select_db($database, $mysql);

// GET VIDEO CLIP ID //
$clip_id = mysql_real_escape_string($_GET['clipid']);

// QUERY THE NEEDED VIDEO CLIP //
$sql_clip = mysql_query(
"SELECT clipid, clipname 
FROM tblmembervideoclip 
WHERE clipid = '$clip_id'", $mysql) or die(mysql_error());
$data_clip = mysql_fetch_assoc($sql_clip);
$clip = $data_clip['clipname'];

// QUERY COMMENTS FOR THE VIDEO CLIP //
$sql_comments = mysql_query(
"SELECT comments_id, comments_content, comments_clipid 
FROM comments 
WHERE comments_clipid = $clip_id 
ORDER BY comments_id DESC 
LIMIT 0, 5", $mysql) or die(mysql_error());
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../includes/flowplayer/flowplayer-3.2.2.min.js"></script>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// FUNCTION TO SUBMIT COMMENTS
$(function() {
	$("#submit").click(function() {
		// APPLY FORM ELEMENTS TO VARIABLES //
		var comment = $("#comment").val();
		var clip_id = $("#clip_id").val();
		// BUILD DATA //
		var comment_data = {
			'comment': comment,
			'clip_id': clip_id
		}
		// IF CONTENT ELEMENT IS EMPTY DISPLAY ERROR //
		if (comment == '') {
			alert("Please Enter Some Text");
		// OTHERWISE APPLY AND ADD THE COMMENT //
		} else {
			// DO AJAX POST AND FETCH NEW COMMENT //
			$.ajax({
				type: "POST",
  					url: "demo.php",
   					data: comment_data,
  					cache: false,
  					success: function(html) {
					$("#update").prepend(html);
					$("#update :first").slideDown("slow");
					document.getElementById('comment').value='';
					document.getElementById('comment').focus();
				}
 			});
		}
		return false;
	});
});

// FUNCTION TO RATE VIDEO //
$(".like").click(function() {
	var id = $(this).attr("id");
	var name = $(this).attr("name");
	$("#votebox").slideDown("slow");
	var dataString = 'id='+ id + '&name='+ name;	
	$.ajax ({
		type: "POST",
		url: "rating.php",
		data: dataString,
		cache: false,
		success: function(html) {
			$("#rating_content").html(html);
		} 
	});
});
$(".close").click(function() {
	$("#votebox").slideUp("slow");
});

// FUNCTION FOR PAGINATION
$(function() {
	$('.more').live("click",function() {
		var ID = $(this).attr("id");
		var clip_id = $("#clip_id").val();
		if(ID) {
			$("#more"+ID).html('Loading Comments...');
			$.ajax({
				type: "POST",
				url: "ajax_more.php",
				data: 'lastmsg='+ ID + '&clip_id='+ clip_id,
				cache: false,
				success: function(html) {
					$("#update").append(html);
					$("#more"+ID).remove(); // removing old more button
				}
			});
		} else {
			$(".morebox").html('No More Comments');// no results
		}
		return false;
	});
});
});
</script>
</head>
<body>

<?php include ('logo.php'); ?>

<hr />

<!--BEGIN HEADER--><div id="header">
<?php include ('menu.php'); ?>
</div><!--END HEADER-->

<!--BEGIN PAGE--><div id="page">

<!--BEGIN CONTENT--><div id="content">

<!--BEGIN POST--><div class="post">
<h2 class="style3">Video</h2>

<!--BEGIN ENTRY--><div class="entry">

<table width="250" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td width="150" align="center" class="close">LIKE THIS VIDEO?</td>
<td width="50" align="center"><a href="javascript:void(0);return false;" class="like" id="<?php echo $clip_id; ?>" name="up"><img src="../images/like.png" height="40" border="0" /></a></td>
<td width="50" align="center"><a href="javascript:void(0);return false;" class="like" id="<?php echo $clip_id; ?>" name="down"><img src="../images/dislike.png" height="40" border="0" /></a></td>
</tr>
</table>

<!--BEGIN VOTEBOX-->
<div id="votebox">
<span id='close'><a href="javascript:void(0);return false;" class="close"><img src="../images/up.png" /></a></span>
<div id="rating_content"></div>
</div>
<!--END VOTEBOX-->
  
<!--BEGIN FLOWPLAYER--><div align="center">
<a href=<?php echo "videos/".$clip; ?> style="display: block; width: 640px; height: 480px;" id="player"></a>
<script language="JavaScript">
flowplayer("player", "../includes/flowplayer/flowplayer-3.2.2.swf", {
version: [9, 115],
clip: {
	scaling: "orig",
	autoPlay: false
}
});
</script>
</div><!--END FLOWPLAYER-->

<p>
<div align="center" class="style2">COMMENT ON THIS VIDEO</div></p>

<!--BEGIN COMMENT FORM-->
<form id="CommentForm" method="post">
<textarea cols="30" rows="4" id="comment" name="comment" style="width:100%;" ></textarea>
<div align="center"><input type="button" id="submit" value="Post Your Comment" style="width: 200px; height:40px;" />
<input type="hidden" id="clip_id" value="<?php echo $clip_id; ?>" /></div>
</form>
<!--END COMMENT FORM-->

<br />

<?php while ($data_comments = mysql_fetch_assoc($sql_comments)) {
$comment_id = $data_comments['comments_id'];
$comment = $data_comments['comments_content']; ?>
<div style="border-top: 1px solid #CCCCCC;  padding: 10px; background-color: #FFFFFF; color:#000000;">
	<div align="left" style="word-wrap: break-word;"><?php echo nl2br(stripslashes($comment)); ?></div>
</div>
<?php } ?>

<div id="update" style="word-wrap: break-word;"></div>

<div id="more<?php echo $comment_id; ?>" class="morebox">
<a href="#" class="more" id="<?php echo $comment_id; ?>">Show More Comments</a>
</div>

</div>
<!--END ENTRY-->

</div><!--END POST-->

</div><!--END CONTENT-->

<?php include ('storepromo.php'); ?>

<div style="clear: both;"> </div>

</div><!--END PAGE-->

<?php include ('footer.php'); ?>

</body>
</html>

 

Pagination Code...

<?php
// CONNECT TO DATABASE //
require_once('../includes/mysql.php');
mysql_select_db($database, $mysql);

if(isset($_POST['lastmsg'])) {
$lastmsg = $_POST['lastmsg'];
$lastmsg = mysql_real_escape_string($lastmsg);
$clip_id = mysql_real_escape_string($_POST['clip_id']);
// QUERY COMMENTS FOR THE VIDEO CLIP //
$sql_comments = mysql_query(
	"SELECT comments_id, comments_content, comments_clipid 
	FROM comments 
	WHERE comments_id < '$lastmsg' AND comments_clipid = '$clip_id'
	ORDER BY comments_id DESC LIMIT 5", $mysql) or die(mysql_error());

while($row = mysql_fetch_array($sql_comments)) {
	$comment_id = $row['comments_id'];
	$comment = $row['comments_content']; ?>
    	
        <div style="border-top: 1px solid #CCCCCC; padding: 10px; background-color: #FFFFFF; color:#000000;">
		<div align="left"><?php echo stripslashes(nl2br($comment)); ?></div>
	</div>
        
<?php } ?>

<div id="more<?php echo $comment_id; ?>" class="morebox">
<a href="#" id="<?php echo $comment_id; ?>" class="more">Show More Comments</a>
</div>
<?php
}
?>

 

Insert Comment Code...

<?php
// CONNECT TO DATABASE //
require_once('../includes/mysql.php');
mysql_select_db($database, $mysql);

if (isset($_POST['comment'])) {
$comment = mysql_real_escape_string($_POST['comment']);
$clip_id = mysql_real_escape_string($_POST['clip_id']);
mysql_query(
	"INSERT INTO comments (
		comments_content, 
		comments_clipid
		) values (
			'$comment', 
			'$clip_id')", $mysql) or die(mysql_error());

$sql_comments = mysql_query(
	"SELECT comments_id, comments_content, comments_clipid
	FROM comments
	WHERE comments_clipid = '$clip_id'
	ORDER BY comments_id DESC", $mysql) or die(mysql_error());
$data_comments = mysql_fetch_array($sql_comments);
$comment_id = $data_comments['comments_id'];
$comment = $data_comments['comments_content'];
} 
?>

<div style="border-top: 1px solid #CCCCCC; padding: 10px; background-color: #FFFFFF; color:#000000;">
<div align="left"><?php echo stripslashes(nl2br($comment)); ?></div>
</div>

 

Rating Code...

<?php
// CONNECT TO DATABASE //
require_once('../includes/mysql.php');
mysql_select_db($database, $mysql);

if ($_POST['id']) {
$id = mysql_real_escape_string($_POST['id']);
$name = mysql_real_escape_string($_POST['name']);

mysql_query(
	"UPDATE tblmembervideoclip
	SET $name = $name+1 
	WHERE clipid='$id'");

$result = mysql_query(
	"SELECT up, down 
	FROM tblmembervideoclip 
	WHERE clipid='$id'");

$row = mysql_fetch_array($result);
$up_value = $row['up'];
$down_value = $row['down'];
$total = $up_value + $down_value;

$up_per = ($up_value*100) / $total;
$down_per = ($down_value*100) / $total;
?>

<table width="100%" cellpadding="0" cellspacing="5">

<tr>
<td width="15%" align="right" valign="middle">LIKES </td>
<td width="75%" valign="middle"><div id="greebar" style="width:<?php echo $up_per; ?>%"></div></td>
<td width="10%" valign="right"> (<?php echo $up_value; ?>)</td>
</tr>

<tr>
<td width="15%" align="right" valign="middle">DISLIKES </td>
<td width="75%" valign="middle"><div id="redbar" style="width:<?php echo $down_per; ?>%"></div></td>
<td width="10%" valign="right"> (<?php echo $down_value; ?>)</td>
</tr>
</table>

<?php } ?>

RyanMinor Member

RyanMinor

Posted
  • Author
Posted

Update...I got the script working the way I want. All I did was create a whole other <div> with which to display the paginated comments under the originally displayed ones. For some reason, in WAMP, the "Show More Comments" buytton wouldn't change. When I loaded into the live Linux host, it worked. I really don't know why, but I am glad it is working properly. Thanks!

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • 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.