×

You're using an outdated browser

For a better experience, keep your browser up to date. Check here for the latest version.

Manual

Displaying and Adding User Comments

Thomas Walker

Thomas Walker Last update: Aug 7, 2017

Displaying Comments in the Viewport

Here is some very simple example code for working with the comments feature.

Place this in your page.vm, preferably after the opening body tag.

<script type="text/javascript">
    var pageId = '$page.id';
    var commentResourcePath = '$comments.restUrl';
</script>

Here is the actual template code rendering the comments thread. Place this underneath the $page.content. 

<h2>Comments</h2>
#macro(printCommentThread $comment)
<li class="comment">
  <div class="comment-header">
    $comment.author
    (created: $comment.creationDate("yyyy-MM-dd hh:mm"),
    last modified: $comment.lastModificationDate("yyyy-MM-dd hh:mm"))
  </div>
  <div class="comment-content">
	  <p class="comment-body">$comment.content</p>
  </div>
  <div><a class="comment-reply-link" data-comment-id="$comment.id" href="#">Reply</a></div>
  #foreach($child in $comment.children)
    <ol class="comment-threads">
	#printCommentThread($child)
    </ol>
  #end
</li>
#end
<ol id="comments-section" class="comment-threads top-level">
  #foreach($comment in $page.topLevelComments)
    #printCommentThread($comment)
  #end
</ol>

Adding Comments from Viewport

Create an extra javascript file to place this code into. This can be loaded after jQuery in your head element. This creates a form after the comments-section.

Info

See Referencing JS/CSS and Image Files for including created files.

$(document).ready(function () {
  
  var generateFormId = function(commentId) {
    var formId = "comment-submit-form";
    return commentId ? formId + "-" + commentId : formId;
  };
  
  var generateCommentReplyForm = function(formId, commentId) {
	return '<form id="' + formId + '">' +
      '  <input type="text" name="pageId" value="' + pageId + '" hidden="true">' +
      '  <input type="text" name="replyTo" value="' + commentId + '" hidden="true">' +
      '  <textarea name="content" rows="5" cols="30"></textarea><br>' +
      '  <select name="contentType">' +
      '    <option value="markdown">Markdown</option>' +
      '    <option value="plain">Plain</option>' +
      '  </select>' +
      '  <input type="submit" value="Submit">' +
      '</form>';
  };
 
  var submitFormEvent = function(event) {
    var data = {
      'pageId': this.elements.pageId.value,
      'replyTo': this.elements.replyTo.value,
      'content': this.elements.content.value,
      'contentType': this.elements.contentType.value,
    };
    $.ajax({
      type: "POST",
      url: commentResourcePath,
      data: $.param(data),
      success: function() {
        location.reload();
      },
      error: function() {
        alert("There was an error submitting the comment.");
      }
    });
           
	event.preventDefault();
  };
  
  $('#comments-section').after(generateCommentReplyForm('comment-submit-form', ''));
  $('#comment-submit-form').submit(submitFormEvent);
  
  $('.comment-reply-link').click(function(event) {
    var commentId = this.dataset.commentId;
    var formId = generateFormId(commentId);
    var form = $('#' + formId);
    if (form.length) {
		form.remove();
    } else {
		$(this).after(generateCommentReplyForm(formId, commentId));
		$('#' + formId).submit(submitFormEvent);
    }
    event.preventDefault();
  });
  
});
2x2.10
We use cookies to create a secure and effective browsing experience for our website visitors and to understand how you use our site (i.e. Google Analytics). For more information: click here.
Ok