Add Comment

Describes the request data identifier and the response structure required to implement posting comments and replies on a post.

Data Identifier

{
  "dataID": "SAVE_COMMENT",
  "post_key": "E477FEEB837326JEUDYFC505D20C022",
  "comment": "Comment content"
}
KeyDescription
dataIDUse SAVE_COMMENT for a comment and SAVE_REPLY_COMMENT for a reply. When the form contains parent_comment_key, the request is sent as SAVE_REPLY_COMMENT automatically.
post_keyUnique key of the post the comment belongs to. It is filled automatically from the data-post-key value of the element whose id is post.
commentComment content. The input field must have the name attribute set to comment to be submitted.
parent_comment_keyUsed for replies only. The comment_key of the comment being replied to.

HTML

<div id="post" data-post-key="E477FEEB837326JEUDYFC505D20C022">
    <form id="frm_comment">
        <textarea id="comment" name="comment" rows="1" class="form-control"></textarea>
        <button type="button" id="btn_save_comment" class="btn btn-primary px-4">Save</button>
    </form>

    <div class="h-div-comment" data-comment-key="A1B2C3D4E5F6...">
        <p>Comment content is displayed here.</p>
        <a href="#" class="h-btn-reply-comment">REPLY</a>

        <form class="h-form-reply-comment" style="display:none;">
            <input type="hidden" name="parent_comment_key" value="A1B2C3D4E5F6...">
            <textarea name="comment" rows="1" class="form-control"></textarea>
            <button type="button" class="h-btn-submit-reply btn btn-primary">Save</button>
            <button type="button" class="h-btn-cancel-reply btn btn-light">Cancel</button>
        </form>

        <div class="h-div-reply-comment-list" style="display:none;">
            <div class="h-div-reply-comment" data-comment-key="F6E5D4C3B2A1...">
                <span>@Parent writer</span>
                <p>Reply content is displayed here.</p>
            </div>
        </div>
    </div>
</div>
  • div
    <div id="post" data-post-key="E477FEEB837326JEUDYFC505D20C022"></div>

    The post area. The id must be set to post and data-post-key must hold the post[0].post_key value from the Response Result. This value is sent as post_key when a comment is saved.

  • form
    <form id="frm_comment"></form>

    The comment form. The id must be set to frm_comment.

  • comment
    <textarea id="comment" name="comment" rows="1" class="form-control"></textarea>

    The comment input. The name must be set to comment. It can also be submitted with the Shift + Enter keys.

  • button
    <button type="button" id="btn_save_comment" class="btn btn-primary px-4"></button>

    The comment save button. The id must be set to btn_save_comment.

  • div
    <div class="h-div-comment" data-comment-key="A1B2C3D4E5F6..."></div>

    The area where a single comment is displayed. The class selector must include h-div-comment and data-comment-key must hold the comment_key of that comment.

  • a
    <a href="#" class="h-btn-reply-comment"></a>

    The button that opens the reply form. The class selector must include h-btn-reply-comment.

  • form
    <form class="h-form-reply-comment" style="display:none;"></form>

    The reply form. The class selector must include h-form-reply-comment and it must be placed inside an h-div-comment or h-div-reply-comment area.

  • parent_comment_key
    <input type="hidden" name="parent_comment_key" value="A1B2C3D4E5F6...">

    The comment_key of the comment being replied to. The name must be set to parent_comment_key. A form holding this value is sent as SAVE_REPLY_COMMENT.

  • comment
    <textarea name="comment" rows="1" class="form-control"></textarea>

    The reply input. The name must be set to comment.

  • button
    <button type="button" class="h-btn-submit-reply btn btn-primary"></button>

    The reply save button. The class selector must include h-btn-submit-reply.

  • button
    <button type="button" class="h-btn-cancel-reply btn btn-light"></button>

    The reply cancel button. The class selector must include h-btn-cancel-reply.

  • div
    <div class="h-div-reply-comment-list" style="display:none;"></div>

    The area where replies are displayed. The class selector must include h-div-reply-comment-list. It is toggled by the h-btn-show-reply-comment button.

  • div
    <div class="h-div-reply-comment" data-comment-key="F6E5D4C3B2A1..."></div>

    The area where a single reply is displayed. The class selector must include h-div-reply-comment and data-comment-key must hold the comment_key of that reply.

Response Result

{
  "result": true,
  "post_key": "E477FEEB837326JEUDYFC505D20C022",
  "comment": [
    {
      "comment_key": "A1B2C3D4E5F6837326JEUDYFC505D20C",
      "post_key": "E477FEEB837326JEUDYFC505D20C022",
      "seq": 128,
      "root_seq": 0,
      "parent_seq": 0,
      "depth": 1,
      "to_member_seq": 0,
      "to_name": "",
      "member_seq": 300,
      "name": "micky",
      "board_seq": 100,
      "post_seq": 34,
      "comment": "Comment content",
      "create_date": "2025-05-30 02:53:34",
      "modify_date": "2025-05-30 02:53:34",
      "delete_flg": "N"
    }
  ]
}
KeyDescription
resultWhether the comment was saved
post_keyUnique key of the post the comment belongs to
comment[0].comment_keyUnique key of the saved comment
comment[0].post_keyUnique key of the post the comment belongs to
comment[0].seqComment sequence
comment[0].root_seqSequence of the top comment of the reply group (0 for a comment)
comment[0].parent_seqSequence of the comment being replied to (0 for a comment)
comment[0].depthComment depth (1 for a comment, 2 or more for a reply)
comment[0].to_member_seqMember sequence of the reply target
comment[0].to_nameNickname of the reply target
comment[0].member_seqMember sequence of the writer
comment[0].nameNickname of the writer
comment[0].board_seqBoard sequence
comment[0].post_seqPost sequence
comment[0].commentComment content
comment[0].create_dateCreated date in Y-m-d H:i:s format
comment[0].modify_dateModified date in Y-m-d H:i:s format
comment[0].delete_flgDelete flag (N for normal, Y for deleted)
  • On success the comment list (GET_COMMENT_LIST) is reloaded automatically and reflected on the screen.
  • If comment notification is enabled for the board, a notification is sent to the post writer.

Example

Comments

2
micky 05-30 02:53

Comment content is displayed here.

Reply 
<div id="post" :data-post-key="output.post[0].post_key">
  <form id="frm_comment" class="my-4">
    <div class="d-flex justify-content-between align-items-center mb-2">
      <h4 class="mb-0">Comments</h4>
      <small v-if="output.post[0].comment_count>0">
        <i class="fas fa-comment me-1"></i>
        <span class="comment-count">{{ output.post[0].comment_count.toLocaleString() }}</span>
      </small>
    </div>
    <div class="mb-2">
      <label for="comment" class="form-label visually-hidden">Comment</label>
      <textarea id="comment" name="comment" rows="1" class="form-control" placeholder="Input comment"></textarea>
    </div>
    <div class="text-end">
      <button type="button" id="btn_save_comment" class="btn btn-primary px-4">Save</button>
    </div>
  </form>

  <div class="h-div-comment" :data-comment-key="comment.comment_key"
       v-for="comment in output.post[0].comment_list" :key="comment.comment_key">
    <div class="border-bottom px-1 py-3">
      <div class="d-flex justify-content-between align-items-center">
        <strong class="me-1">{{ comment.name }}</strong>
        <small class="text-secondary">{{ comment.create_date }}</small>
      </div>
      <p class="my-2 py-2 mb-0" v-html="comment.comment.split('\n').join('<br>')"></p>
      <div class="text-end">
        <a href="#" class="h-btn-show-reply-comment" v-if="comment.reply_comment.length>0">
          <small>Replies {{ comment.reply_comment_cnt.toLocaleString() }}</small>
        </a>
        <a href="#" class="h-btn-reply-comment rounded-3 py-2 px-3 bg-gray-light ms-2 small">
          <i class="fas fa-comment"></i> Reply
        </a>
      </div>
    </div>

    <form class="my-3 h-form-reply-comment" style="display:none;">
      <input type="hidden" name="parent_comment_key" :value="comment.comment_key"/>
      <textarea name="comment" rows="1" class="form-control" placeholder="Input reply"></textarea>
      <div class="text-end mt-2">
        <button type="button" class="h-btn-submit-reply btn btn-primary btn-sm px-3">Save</button>
        <button type="button" class="h-btn-cancel-reply btn btn-light btn-sm px-3">Cancel</button>
      </div>
    </form>

    <div class="h-div-reply-comment-list px-2 ms-4 py-3" style="display:none;">
      <div class="h-div-reply-comment" :data-comment-key="reply_comment.comment_key"
           v-for="reply_comment in comment.reply_comment" :key="reply_comment.comment_key">
        <span class="text-primary">@{{ reply_comment.to_name }}</span>
        <span v-html="reply_comment.comment.split('\n').join('<br>')"></span>
        <div class="text-end">
          <a href="#" class="h-btn-reply-comment rounded-3 py-2 px-2 border bg-white ms-2 small">
            <i class="far fa-comment"></i> Reply
          </a>
        </div>
        <form class="my-3 h-form-reply-comment" style="display:none;">
          <input type="hidden" name="parent_comment_key" :value="reply_comment.comment_key"/>
          <textarea name="comment" rows="1" class="form-control" placeholder="Input reply"></textarea>
          <div class="text-end mt-2">
            <button type="button" class="h-btn-submit-reply btn btn-primary btn-sm px-3">Save</button>
            <button type="button" class="h-btn-cancel-reply btn btn-light btn-sm px-3">Cancel</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div id="post" data-post-key="<?= $output['post'][0]['post_key']; ?>">
    <form id="frm_comment" class="my-4">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <h4 class="mb-0">Comments</h4>
            <? if ($output['post'][0]['comment_count'] > 0) { ?>
                <small>
                    <i class="fas fa-comment me-1"></i>
                    <span class="comment-count"><?= number_format($output['post'][0]['comment_count']); ?></span>
                </small>
            <? } ?>
        </div>
        <div class="mb-2">
            <label for="comment" class="form-label visually-hidden">Comment</label>
            <textarea id="comment" name="comment" rows="1" class="form-control" placeholder="Input comment"></textarea>
        </div>
        <div class="text-end">
            <button type="button" id="btn_save_comment" class="btn btn-primary px-4">Save</button>
        </div>
    </form>

    <? foreach ($output['post'][0]['comment_list'] as $arrComment) { ?>
        <div class="h-div-comment" data-comment-key="<?= $arrComment['comment_key']; ?>">
            <div class="border-bottom px-1 py-3">
                <div class="d-flex justify-content-between align-items-center">
                    <strong class="me-1"><?= $arrComment['name']; ?></strong>
                    <small class="text-secondary"><?= $arrComment['create_date']; ?></small>
                </div>
                <p class="my-2 py-2 mb-0"><?= nl2br($arrComment['comment']); ?></p>
                <div class="text-end">
                    <? if (count($arrComment['reply_comment']) > 0) { ?>
                        <a href="#" class="h-btn-show-reply-comment">
                            <small>Replies <?= number_format($arrComment['reply_comment_cnt']); ?></small>
                        </a>
                    <? } ?>
                    <a href="#" class="h-btn-reply-comment rounded-3 py-2 px-3 bg-gray-light ms-2 small">
                        <i class="fas fa-comment"></i> Reply
                    </a>
                </div>
            </div>

            <form class="my-3 h-form-reply-comment" style="display:none;">
                <input type="hidden" name="parent_comment_key" value="<?= $arrComment['comment_key']; ?>"/>
                <textarea name="comment" rows="1" class="form-control" placeholder="Input reply"></textarea>
                <div class="text-end mt-2">
                    <button type="button" class="h-btn-submit-reply btn btn-primary btn-sm px-3">Save</button>
                    <button type="button" class="h-btn-cancel-reply btn btn-light btn-sm px-3">Cancel</button>
                </div>
            </form>

            <div class="h-div-reply-comment-list px-2 ms-4 py-3" style="display:none;">
                <? foreach ($arrComment['reply_comment'] as $arrReplyComment) { ?>
                    <div class="h-div-reply-comment" data-comment-key="<?= $arrReplyComment['comment_key']; ?>">
                        <span class="text-primary">@<?= $arrReplyComment['to_name']; ?></span>
                        <span><?= nl2br($arrReplyComment['comment']); ?></span>
                        <div class="text-end">
                            <a href="#" class="h-btn-reply-comment rounded-3 py-2 px-2 border bg-white ms-2 small">
                                <i class="far fa-comment"></i> Reply
                            </a>
                        </div>
                        <form class="my-3 h-form-reply-comment" style="display:none;">
                            <input type="hidden" name="parent_comment_key" value="<?= $arrReplyComment['comment_key']; ?>"/>
                            <textarea name="comment" rows="1" class="form-control" placeholder="Input reply"></textarea>
                            <div class="text-end mt-2">
                                <button type="button" class="h-btn-submit-reply btn btn-primary btn-sm px-3">Save</button>
                                <button type="button" class="h-btn-cancel-reply btn btn-light btn-sm px-3">Cancel</button>
                            </div>
                        </form>
                    </div>
                <? } ?>
            </div>
        </div>
    <? } ?>
</div>

Related Links