Comment Submission Form

Parameters

channel="news"

entry_id="24"

form_class="news_comment_form"

form_id="news_comment_form"

inline_errors="yes"

preview="channel/preview"

return="template_group/template/url_title"

return_error="template_group/error"

url_title="my_wedding"

Conditionals

Variables

{comment_date format="%Y %m %d"}

Example Code

The Comment Entries Tag Code:

{exp:comment:entries limit="20"}
  <div class="comment" id="comment_{comment_id}">
    <span class="comment_body">
      {comment}
    </span>

    {if editable}
      <a href="#" class="edit_link">Edit</a>

      <div class="editCommentBox" style="display:none;">
        <textarea cols="70" rows="8">{comment_stripped}</textarea><br />
        <input type="submit" name="cancel" value="Cancel" class="cancel_edit">
        <input type="submit" name="save" value="Save" class="submit_edit">
      </div>
    {/if}

    {if can_moderate_comment}
    <a href="#" class="mod_link">Close</a>
    {/if}
  </div>
{/exp:comment:entries}

The JavaScript Code:

<script src="/themes/ee/asset/javascript/compressed/jquery/jquery.js" type="text/javascript"></script>
{exp:comment:edit_comment_script}

Comment Edit Script Tag

{exp:comment:edit_comment_script}

This tag outputs a script tag that will include the necessary JavaScript for your comment editor. This script requires jQuery, so you will need to include that as well.

AJAX Edit URL Tag

{exp:comment:ajax_edit_url}

This tag outputs an action url that links to a method that processes the submitted data. It is useful if you are customizing the client-side code. The method requires both a comment id and either a comment or a status variable. For example:

$.post("{exp:comment:ajax_edit_url}", {status: "close", comment_id: id, XID: hash});

Note: If secure forms is enabled, a proper security hash must be sent in order to edit or close the comment.

A request for an edit will return a response array. In the case of an error, an error key with a response message will be sent. If the request is successful, an array with a new security hash will be sent with the key of ‘XID’. If the entry was closed, a ‘moderated’ key will be set. If it was edited, a ‘comment’ key will be returned containing the updated comment text.

Editing Permissions

By using the {if editable} conditional in the Comment Entries tag, you can output a link, instructions or a form if the viewing member has permission to edit the comment, and by using the {if can_moderate_comment} you can display whatever is appropriate if the viewing member has permission to moderate (close) the comment.

For members without administrative access, in order to edit a comment they must be logged in, the author of the comment, and the editing time limit must not have expired. If a member has a role with permission to edit the comments of any entry, that member will have edit permissions regardless of the editing time limit.

Comment moderators may close the comment. The edit time limit does not apply to moderators.

Superadmins will always have {editable} and {can_moderate_comment} permissions on any comment.

Customizing Client-Side Code

If you need additional control or customized hooks in your markup and JavaScript for the comment editor, you can forego the simplified jQuery and {exp:comment:edit_comment_script} and roll your own. You can use the example code below for reference, or download and fork from our GitHub repo.

<script type="text/javascript">
  $.fn.CommentEditor = function(options) {

    var OPT;

    OPT = $.extend({
      url: "{exp:comment:ajax_edit_url}",
      comment_body: '.comment_body',
      showEditor: '.edit_link',
      hideEditor: '.cancel_edit',
      saveComment: '.submit_edit',
      closeComment: '.mod_link'
    }, options);

    var view_elements = [OPT.comment_body, OPT.showEditor, OPT.closeComment].join(','),
      edit_elements = '.editCommentBox',
      hash = '{XID_HASH}';

    return this.each(function() {
      var id = this.id.replace('comment_', ''),
      parent = $(this);

      parent.find(OPT.showEditor).click(function() { showEditor(id); return false; });
      parent.find(OPT.hideEditor).click(function() { hideEditor(id); return false; });
      parent.find(OPT.saveComment).click(function() { saveComment(id); return false; });
      parent.find(OPT.closeComment).click(function() { closeComment(id); return false; });
    });

    function showEditor(id) {
      $("#comment_"+id)
        .find(view_elements).hide().end()
        .find(edit_elements).show().end();
    }

    function hideEditor(id) {
      $("#comment_"+id)
        .find(view_elements).show().end()
        .find(edit_elements).hide();
    }

    function closeComment(id) {
      var data = {status: "close", comment_id: id, XID: hash};

      $.post(OPT.url, data, function (res) {
        if (res.error) {
          return $.error('Could not moderate comment.');
        }

        hash = res.XID;
        $('input[name=XID]').val(hash);
        $('#comment_' + id).hide();
       });
    }

    function saveComment(id) {
      var content = $("#comment_"+id).find('.editCommentBox'+' textarea').val(),
        data = {comment: content, comment_id: id, XID: hash};

    $.post(OPT.url, data, function (res) {
        if (res.error) {
          return $.error('Could not save comment.');
        }

        hash = res.XID;
        $('input[name=XID]').val(hash);
        $("#comment_"+id).find('.comment_body').html(res.comment);
        hideEditor(id);
        });
    }
  };


  $(function() { $('.comment').CommentEditor(); });
</script>