Modify Comment

Describes the request data identifier and the response structure required to implement editing comments and replies.

Data Identifier

{
  "dataID": "SAVE_REPLY_COMMENT",
  "post_key": "E477FEEB837326JEUDYFC505D20C022",
  "parent_comment_key": "A1B2C3D4E5F6837326JEUDYFC505D20C",
  "comment_key": "A1B2C3D4E5F6837326JEUDYFC505D20C",
  "comment": "Modified comment content"
}

Key	Description
dataID	Editing uses SAVE_REPLY_COMMENT just like saving. When comment_key is sent together, the request is handled as an update instead of a new comment.
post_key	Unique 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.
parent_comment_key	The comment_key of the comment that owns the form. The request is sent as an update only when this value exists.
comment_key	Unique key of the comment being edited. It is added to the form as a hidden field automatically when the edit button is clicked.
comment	The edited comment content. The existing content is filled in automatically when the edit button is clicked.

HTML

<div id="post" data-post-key="E477FEEB837326JEUDYFC505D20C022">
    <div class="h-div-comment" data-comment-key="A1B2C3D4E5F6...">
        <p>Comment content is displayed here.</p>
        <a href="#" class="h-btn-reply-modify">EDIT</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...">
                <p>Reply content is displayed here.</p>
                <a href="#" class="h-btn-reply-modify">EDIT</a>
                <form class="h-form-reply-comment" style="display:none;">
                    <input type="hidden" name="parent_comment_key" value="F6E5D4C3B2A1...">
                    <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>
        </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.
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-modify"></a>
```
The comment edit button. The class selector must include h-btn-reply-modify and it must be placed inside an h-div-comment area. On click it loads the existing content with GET_COMMENT, fills the form in the same area and switches it to edit mode.
form
```
<form class="h-form-reply-comment" style="display:none;"></form>
```
The form used for editing. The class selector must include h-form-reply-comment and it must be placed inside the same h-div-comment area as the edit button. The same form as the reply form is reused.
parent_comment_key
```
<input type="hidden" name="parent_comment_key" value="A1B2C3D4E5F6...">
```
The comment_key of the comment that owns the form. The name must be set to parent_comment_key.
comment
```
<textarea name="comment" rows="1" class="form-control"></textarea>
```
The comment input. The name must be set to comment. The existing content is filled in automatically when the edit button is clicked.
button
```
<button type="button" class="h-btn-submit-reply btn btn-primary"></button>
```
The save button for the edit. The class selector must include h-btn-submit-reply.
button
```
<button type="button" class="h-btn-cancel-reply btn btn-light"></button>
```
The cancel button. The class selector must include h-btn-cancel-reply. On click the input content and comment_key are both removed.
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.
a
```
<a href="#" class="h-btn-reply-modify"></a>
```
The reply edit button. It uses the same h-btn-reply-modify selector as a comment and must be placed inside an h-div-reply-comment area.

Response Result

{
  "result": true,
  "post_key": "E477FEEB837326JEUDYFC505D20C022"
}

Key	Description
result	Whether the comment was updated
post_key	Unique key of the post the comment belongs to

Only comments written by the signed-in member can be edited. Requesting an edit on another member's comment returns result as false.
On success the comment list is reloaded automatically and reflected on the screen.

Example

micky 05-30 02:53

Comment content is displayed here.

Edit

<div id="post" :data-post-key="output.post[0].post_key">
  <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-reply-modify rounded-3 py-2 px-3 bg-gray-light ms-2 small"
           v-if="output.user.auth_flg && comment.member_seq == output.user.seq">
          <i class="fas fa-pen"></i> Edit
        </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"></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-modify rounded-3 py-2 px-2 border bg-white ms-2 small"
             v-if="output.user.auth_flg && reply_comment.member_seq == output.user.seq">
            <i class="fas fa-pen"></i> Edit
          </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"></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']; ?>">
    <? 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 ($output['user']['auth_flg'] && $arrComment['member_seq'] == $output['user']['seq']) { ?>
                        <a href="#" class="h-btn-reply-modify rounded-3 py-2 px-3 bg-gray-light ms-2 small">
                            <i class="fas fa-pen"></i> Edit
                        </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"></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">
                            <? if ($output['user']['auth_flg'] && $arrReplyComment['member_seq'] == $output['user']['seq']) { ?>
                                <a href="#" class="h-btn-reply-modify rounded-3 py-2 px-2 border bg-white ms-2 small">
                                    <i class="fas fa-pen"></i> Edit
                                </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"></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>

User Discussions

ADD

There are no posts yet.

Getting Started

Member

Forum / Board

Web Form

Widget

Modify Comment

Data Identifier

HTML

Response Result

Example

Related Links

User Discussions