Completed the ajax commenting functionality

code/controllers/CommentingController.php

@@ -151,7 +151,7 @@ class CommentingController extends Controller {
 			$comment->Moderated = true;
 			$comment->write();
 				
-			return ($this->request->isAjax()) ? true : $this->redirectBack();
+			return ($this->request->isAjax()) ? $comment->renderWith('CommentsInterface_singlecomment') : $this->redirectBack();
 		}
 
 		return $this->httpError(404);
@@ -172,7 +172,7 @@ class CommentingController extends Controller {
 			$comment->Moderated = true;
 			$comment->write();
 				
-			return ($this->request->isAjax()) ? true : $this->redirectBack();
+			return ($this->request->isAjax()) ? $comment->renderWith('CommentsInterface_singlecomment') : $this->redirectBack();
 		}
 
 		return $this->httpError(404);
@@ -193,7 +193,7 @@ class CommentingController extends Controller {
 			$comment->Moderated = true;
 			$comment->write();
 				
-			return ($this->request->isAjax()) ? true : $this->redirectBack();
+			return ($this->request->isAjax()) ? $comment->renderWith('CommentsInterface_singlecomment') : $this->redirectBack();
 		}
 
 		return $this->httpError(404);
@@ -376,12 +376,10 @@ class CommentingController extends Controller {
 		
 		if(Director::is_ajax()) {
 			if(!$comment->Moderated) {
-				echo $comment->renderWith('CommentInterface_pendingcomment');
+				return $comment->renderWith('CommentsInterface_pendingcomment');
 			} else {
-				echo $comment->renderWith('CommentInterface_singlecomment');
+				return $comment->renderWith('CommentsInterface_singlecomment');
 			}
-			
-			return true;
 		}
 
 		$holder = Commenting::get_config_value($comment->BaseClass, 'comments_holder_id');

code/extensions/CommentsExtension.php

@@ -97,6 +97,10 @@ class CommentsExtension extends DataExtension {
 	 * @see docs/en/Extending
 	 */
 	public function CommentsForm() {
+		Requirements::javascript(THIRDPARTY_DIR . '/jquery-validate/lib/jquery.form.js');
+		Requirements::javascript(THIRDPARTY_DIR . '/jquery-validate/jquery.validate.pack.js');
+		Requirements::javascript('comments/javascript/CommentsInterface.js');
+
 		$interface = new SSViewer('CommentsInterface');
 		
 		// detect whether we comments are enabled. By default if $CommentsForm is included

javascript/CommentsInterface.js

@@ -1,130 +1,148 @@
 /**
- * @package userforms
+ * @package comments
  */
-
 (function($) {
 	$(document).ready(function () {
 		
-		/**
+		var commentsHolder = $('.comments-holder'),
-		 * Please note this functionality has not been finished
+			commentsList = $('.comments-list', commentsHolder),
-		 * this file is not loaded on your site. It is simply here
+			noCommentsYet = $('.no-comments-yet', commentsHolder),
-		 * to provide a starting point for someone to take it over
+			form = $('#Form_CommentsForm'),
-		 *
+			error = $('#Form_CommentsForm_error', form).hide()
-		 * @todo finish
-		 */
-		
-		return false;
-		
-		
-		
-		
-		
-		
-		
-		$('.comments-holder-container form').submit(function (e) {
 
-			if($('.comment-holder form [name=Name]').val() && $('.comment-holder form [name=Comment]').val()) {
+		// create the not comments message if it doesn't exist yet, but hide it (incase we need it)
-				// remove the no comments posted text
+		if(!noCommentsYet.length){
-				if($('.no-comments-yet').length > 0) {
+			noCommentsYet = $('<p class="no-comments-yet">No one has commented on this page yet.</p>').appendTo(commentsHolder).hide();
-					$('.no-comments-yet').remove();
+		}
-					
+
-					$(this).parents(".comments-holder-container")
+
-						.find(".comments-holder")
+		/**
-						.append("<ul class='comments-list'></ul>");
+		 * Validate
+		 */
+		form.validate({
+		invalidHandler : function(form, validator){
+				$('html, body').animate({
+			scrollTop: $(validator.errorList[0].element).offset().top - 30
+			}, 200);
+			},
+
+			errorElement: "span",
+			errorClass: "error",
+
+			rules: {
+				Name : {
+					required : true
+				},
+				Email : {
+					required : true,
+					email : true
+				},
+				Comment: {
+					required : true
+				},
+				URL: {
+					url : true
+				}
+			},
+			messages: {
+				Name : {
+					required : 'Plaese enter your name'
+				},
+				Email : {
+					required : 'Plaese enter your email address',
+					email : 'Plaese enter a valid email address'
+				},
+				Comment: {
+					required : 'Plaese enter your comment'
+				},
+				URL: {
+					url : 'Please enter a valid URL'
 				}
-				
-				error.hide();
-				$('#PageComments').prepend('<li><p><img src="cms/images/network-save.gif" /> Loading...</p></li>');
-				newComment = $('#PageComments').children()[0];
-				newComment = $(newComment);
-				
-				$(this).ajaxSubmit(function(response) {
-					if($('#PageComments_holder [name=Math]').length > 0) {
-						$.ajax({
-							url: jQuery('base').attr('href') + 'PageCommentInterface_Controller/newspamquestion',
-							cache: false,
-							success: function(html){
-								// Load spam stuff goes in here
-								$('#PageComments_holder #Math label').text(html);
-								$('#PageComments_holder #Math input').val('');
-							},
-							failure: function(html) {
-								eval(html);
-							}
-						});
-					}
-					if(response.match('validationError')) {
-						newComment.remove();
-						eval(response);
-					} else if(response != "spamprotectionfailed") {
-						newComment.addClass('even');
-						newComment.html(response);
-						newComment.effects('highlight', {}, 1000);
-						if(response.match('<b>Spam detected!!</b>')) {
-							newComment.addClass('spam');
-						}
-						$(this).resetForm();
-					} else {
-						error.text('You got the spam question wrong');
-						error.show();
-						newComment.remove();
-						$('#PageComments_holder #Math input').focus();
-					}
-				});
-			} else {
-				// We're missing things, alert it here
-				
-				error.show();
 			}
-			
-			e.preventDefault();
 		});
+
+
+		/**
+		 * Clicking one of the metalinks performs the operation via ajax
+		 * this inclues the spam and approve links
+		 */
+		form.submit(function (e) {
+
+			// trigger validation, if there are errors add the error classes to the elements
+			if(!form.validate().valid()){
+				form.find('span.error').addClass('message required');
+				return false;
+			}
+		
+			// submit the form
+			$(this).ajaxSubmit(function(response) {
+				noCommentsYet.hide();
+
+				if(!commentsList.length){
+					commentsHolder.append("<ul class='comments-list'></ul>");
+					commentsList = $('.comments-list', commentsHolder);
+				}
+
+				var newComment = $('<li />')
+					.addClass('even first')
+					.html(response)
+					.hide();
+
+				if(response.match('<b>Spam detected!!</b>')) {
+					newComment.addClass('spam');
+				}
+
+				commentsList.prepend(newComment.fadeIn());
+				
+				$(this).resetForm();
+				
+			});
+			
+			return false;
+		});
+
 		
 		/**
 		 * Clicking one of the metalinks performs the operation via ajax
 		 * this inclues the spam and approve links
 		 */
-		$(".action-links a").live('click', function(e) {
+		$(".action-links a", commentsList).live('click', function(e) {
 			var link = $(this);
-			var hide = $(this).parents("li.comments");
+			var comment = link.parents('.comment:first');
+			var commentsList = comment.parents('ul:first');
 			
 			$.ajax({
-				url: $(this).attr('href') + '?ajax=1',
+				url: $(this).attr('href'),
 				cache: false,
 				success: function(html){
 					if(link.hasClass('ham')) {
 						// comment has been marked as not spam
 						comment.html(html);
-						comment.removeClass('spam');
+						comment.removeClass('spam').hide().fadeIn();
-						comment.effect("highlight", {}, 1000);
 					}
 					else if(link.hasClass('approve')) {
 						// comment has been approved
 						comment.html(html);
-						comment.removeClass('unmoderated');
+						comment.removeClass('unmoderated').hide().fadeIn();
-						comment.effect("highlight", {}, 1000);
 					}
 					else if(link.hasClass('delete')) {
-						hide.fadeOut(1000, function() {
+						comment.fadeOut(1000, function() {
-							var comments = hide.parents("ul");
+							comment.remove();
-							hide.remove();
 									
-							if(comments.children().length == 0) {
+							if(commentsList.children().length == 0) {
-								comments.html("<p id=\"no-comments-yet\">No one has commented on this page yet.</p>");
+								noCommentsYet.show();
 							}
 						});
 					}
 					else if(link.hasClass('spam')) {
 						if(html) {
-							hide.html(html);
+							comment.html(html).addClass('spam').hide().fadeIn();
-							hide.effect("highlight", {}, 1000);
 						} else {
-							hide.fadeOut(1000, function() {				// Fade out the comment
+							comment.fadeOut(1000, function() {				// Fade out the comment
-								var comments = hide.parent();			// Grab the comments holder
+								comment.remove();							// remove the comment
-								hide.remove();							// remove the comment
 							
 								if(comments.children().length == 0) {
-									comments.html("<p id=\"no-comments-yet\">No one has commented on this page yet.</p>");
+									noCommentsYet.show();
 								}
 							});
 						}