I am trying to create a commenting system that is linked with videos hosted on my server. The videos are displayed on a watch page (watch.php) and the commenting system is included below the video player. When new comments are posted from the watch page they are then processed and validated by my post class (post.php) and submit.php. Finally a link to script.js implements the AJAX slide down animation to prevent automatic page reloads.
The problem I'm having is that when i try and submit a new comment as a logged in user the form doesn't submit nor does it through an error message so I am having a hard time debugging. I'm OK with PHP but I must admit that I did most all of the AJAX with copy and paste so I'm totally lost.
I will include a link to the site page and then include each of the four scripts.
The site page:
http://budgetgaming.org/watch.php?v=1
watch.php (commenting code starts on line 65)
<?php
include('layouts/header.php');
?>
<div id="outer">
<div id="mainWrapper">
<div id="home"><a href="index.php"></a></div>
<ul class="mainNav">
<li><a class="current" href="reviews.php">Reviews ↪</a></li>
<li><a href="http://budgetgaming.org/forums/index.php">Forums</a></li>
<li><a href="http://budgetgaming.org/blogs/index.php/posts/index">Blogs</a></li>
<li><a href="about.php">About</a></li>
</ul>
<div class="searchBar">
<p>searchBar</p>
</div> <!-- searchBar -->
</div> <!-- mainWrapper -->
<div id="contentWrapper">
<div class="mainContent">
<div class="breadCrumbs">
<p>Reviews → Watch →</p>
</div> <!-- breadCrumbs -->
<div class="videoPlayer">
<?php
require ("../dbConnect.php");
if (isset($_GET['v'])) {
$vId = $_GET['v'];
$q = "SELECT videoUrl FROM videos WHERE vId = $vId";
$r = @mysqli_query ($dbc, $q);
while ($video = mysqli_fetch_array($r, MYSQLI_ASSOC)) {
$currentVideo = $video['videoUrl'];
}
echo '<a href=' . $currentVideo . ' style="display:block; width:619px; height:350px;" id="player"></a>';
mysqli_free_result ($r);
}
?>
</div> <!-- videoPlayer -->
<script>
flowplayer("player", "flowplayer-3.2.2.swf");
</script>
<?php
// PHP intercepts the form submission AND injects database information from previous comments
require ("posts.php");
if (isset($_GET['v'])) {
$vId = $_GET['v'];
$posts = array();
$q = "SELECT * FROM phpbb_users INNER JOIN posts ON posts.vId = $vId WHERE posts.user_id = phpbb_users.user_id";
$r = @mysqli_query ($dbc, $q);
while ($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) {
$posts[] = new Post($row);
}
foreach($posts as $p) {
echo $p->markup();
}
mysqli_free_result ($r);
mysqli_close($dbc);
}
?>
<!-- Include the xhtml for comment system under the video player -->
<div id="addCommentContainer">
<p>Add a Comment</p>
<form id="addCommentForm" method="post" action="">
<div>
<label for="body">Comment Body</label>
<textarea name="body" id="body" cols="20" rows="5"></textarea>
<input type="submit" id="submit" value="Submit" />
</div>
</form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://budgetgaming.org/script.js"></script>
<div class="mostViewed">
<p class="p2">mostViewed</p>
</div> <!-- mostViewed -->
<div class="mostCommented">
<p class="p2">mostCommented</p>
</div> <!-- mostCommented -->
<div class="recentForum">
<p class="p2">recentForum</p>
</div> <!-- recentForum -->
<div class="recentBlog">
<p class="p2">recentBlog</p>
</div> <!-- recentBlog -->
</div> <!-- mainContent -->
</div> <!-- contentWrapper -->
<?php include('layouts/footer.php')?>posts.php (posting class):
<?php
class Post {
private $data = array();
public function __construct($row) {
$this->data = $row;
}
public function markup() {
// Just an alias so I don't have to type $this->data every time
$d = &$this->data;
$name = $d['username'];
$body = $d['post'];
$date = strtotime($d['postDate']);
return '
<div class="comment">
<div class="avatar">
<img src="http://www.gravatar.com/avatar/112fdf7a8fe3609e7af2cd3873b5c6bd?size=50&default=http%3A%2F%2Fdemo.tutorialzine.com%2F2010%2F06%2Fsimple-ajax-commenting-system%2Fimg%2Fdefault_avatar.gif"></a>
</div>
<div class="name"><a href="http://tutorialzine.com/">' . $name . '</a></div>
<div class="date" title="Added at'. date('H:i \o\n M d Y',$date) . '">' . date('d M Y',$date) . '</div>
<p>'.$body.'</p>
</div>
';
}
public static function validate(&$arr) {
// This function validates the data sent via AJAX
// It should return true/false depending on whether the data is valid
// The array variable, $arr, is passed a paramenter containing either the valid input data or error messages
$errors = array();
$data = array();
// Use of filter_input funtion, this is built in as of PHP 5.2.0
if(!$data['body'] = filter_input(INPUT_POST, 'body', FILTER_CALLBACK, array('options'=>'Post::validateText'))) {
$errors['body'] = 'Please enter a comment first.';
}
if(!empty($errors)) {
// If there arn't any errors, copy the $errors array to $arr
$arr = $errors;
return false;
}
// If the data is valid, sanitize all the info and copy it to $arr:
foreach($data as $k=>$v) {
$arr[$k] = mysql_real_escape_string($v);
}
return true;
}
private static function validateText($str) {
// This function is used internally as a FILTER_CALLBACK
if(mb_strlen($str, 'utf8')<1)
return false;
// Encode all html special characters (<, >, ", & .. etc) and convert the new line characters to <br /> tags:
$str = nl2br(htmlspecialchars($str));
// Remove the new line characters left
$str = str_replace(array(chr(10), chr(13)), '', $str);
return $str;
}
}
?>submit.php (handles the submitted post information):
<?php
//Error reporting:
error_reporting(E_ALL^E_NOTICE);
include "../dbConnect.php";
include "post.php";
//This array is going to be populated with either the data that was sent to the script, or the error messages
$arr = array();
$validates = Post::validate($arr);
//save the current user_id as a variable for the sql insert
$currentUser = $_SESSION['user_id'];
if($validates) {
// If everything is OK, insert the information into the database
mysql_query("INSERT INTO posts(user_id, post, postDate, vId)
VALUES (
$currentUser,
'".$arr['body']."',
CURRENT_TIMESTAMP,
$vId
)");
// The data in $arr is escaped for the mysql query
// But we need to unescape the text
// So, we apply stripslashes to all of the elements in the array:
$arr = array_map('stripslashes', $arr);
$insertedPost = new Post($arr);
// Outputting the markup of the just-inserted post:
echo json_encode(array('status'=>1, 'html'=>$insertedPost->markup()));
} else {
// Outputting the error messages
echo '{"status":0,"errors":'.json_encode($arr).'}';
}
?>script.js (The AJAX):
$(document).ready(function(){
// The following code is executed once the DOM is loaded
// This flag will prevent multiple comment submits:
var working = false;
// Listening for the submit event of the form
$('#addCommentForm').submit(function(e){
e.preventDefault();
if(working) return false;
working = true;
$('#submit').val('Sending..');
$('span.error').remove();
// Sending the form fields to submit.php
$.post('submit.php', $(this).serialize(), function(msg){
working = false;
$('#submit').val('Submit');
if(msg.status){
// If the insert was successful, add the comment below the last on the page with a slide effect
$(msg.html).hide().insertBefore('#addCommentContainer').slideDown();
$('#body').val('');
} else {
// If there were errors, loop through the msg.errors object and display them on the page
$.each(msg.errors, function(k,v){
$('label[for='+k+']').append('<span class="error">'+v+'</span>');
});
}
},'json');
});
});Any help would be greatly appreciated and thanks in advance.
