[스프링] 프로젝트 - 게시판 댓글 구현(댓글 수정 편)

해당 게시글의 프로젝트 환경은 링크와 같습니다.

 

[관련 게시글]

• 댓글 리스트 출력
• 댓글 삭제하기
• 댓글 페이징처리

[원리의 이해]

댓글의 수정의 포인트는 아래와 같다.

- 해당 행을 선택해야 함

- 선택된 행 중에서 화면상으로 기존 댓글은 숨겨지고, 수정할 댓글창이 보여야 하며, 'DB'에서는 수정 내용이 반영되어야 함

- 해당 data만 업데이트되어야 하기 때문에 비동기 ajax를 사용

 

 

 

[View][HTML]

댓글 삭제에서 추가한 varStatus를 추가 활용

수정버튼을 클릭하면 현재 행번호를 매개변수로 'commentEdit' 함수가 실행

 

<div>
    <table>
        <c:forEach var="list" items="${commentList}" varStatus="status">
			
            <!--status의 index를 출력-->
            <tr id="cno1${status.index}">
            
                <td>${list.nickName}&emsp;|&emsp;${list.c_date}</td>
                <td><input type="hidden" value="${list.r_no}"></td>
                <td><input type="hidden" id="cnoNo${status.index}" value="${list.cno}"></td>

                <td>
                    <c:choose>
                        <c:when test="${sessionScope.sessionId==list.id}">
                            <ahref="#" id="edit${status.index}" onclick="commentEdit(${status.index}); return false;">수정</a>
                        </c:when>
                    </c:choose>
                </td>
                <td>
                    <c:choose>
                        <c:when test="${sessionScope.sessionId==list.id}">
                            <a  href="#" onclick="commentDeleteCheck(${status.index})">삭제</a>
                        </c:when>
                    </c:choose>
                </td>
            </tr>

         <!-- 아래 추가될 코드 반영하는 부분 -->

        </c:forEach>
    </table>
</div>

화면상 보이는 댓글 폼을 아래와 같이 추가

눈속임이라고 볼 수 있는데, 기존에 등록된 댓글과 textarea로 수정할 내용을 넣는 폼을 다 만들어 두고,

수정할 내용의 폼은 display:none으로 설정해둔다.

수정버튼을 누르면 제이쿼리 및 ajax를 통해서 기존 폼은 안보이고, 수정폼이 보이도록 변경하고 수정된 내용 반영할 수 있도록 한다.

<!-- 기존에 등록된 댓글 -->
<tr id="cno2${status.index}">
    <div>
        ${list.c_content}
    </div>
</tr>


<!-- 수정할 댓글 -->
<tr id="cno3${status.index}" style="display: none;">		
    <td>	
        <c:choose>
            <c:when test="${sessionScope.sessionId==list.id}">
                <div>
                    <div>
                        <textarea mexlength="300" id="c_contentEdit${status.index}" class="form-control" rows="2" cols="100" placeholder="댓글을 입력해 주세요">${list.c_content}</textarea>
                    </div>

                    <div>
                        <a href="" onclick="commentRealEdit(${status.index}); return false;">등록</a>
                    </div>
                </div>
            </c:when>
        </c:choose>
    </td>
</tr>

 

 

 

[View][Ajax]

화면상과 DB단을 각각 아래와 같이 처리

/* 댓글 수정(DB) */
function commentRealEdit(Vindex){
        var cnoNo = $('#cnoNo'+Vindex).val();
        var c_content=$("#c_contentEdit"+Vindex).val();/* 수정된 댓글 내용 */

            $.ajax({
                url : "${pageContext.request.contextPath}/commentRealEdit",
                data : {'cno' : cnoNo, 'c_content' : c_content},
                dataType :'text', 
                success : function(data){
                    if(data == '1'){
                        alert("수정 성공");
                        listComment("1");
                    }
                }
            });
}

/* 댓글 수정(화면) */
function commentEdit(Vindex){
    $('#cno2'+Vindex).hide();
    $('#cno3'+Vindex).show();
    $('#edit'+Vindex).hide();
}