4. 무한 댓글 쓰기 – JSP

댓글의 댓글을 쓰는 화면을 위해서는

게시물에 다는 첫 댓글 작성과 같이 별도의 화면과 4개의 자바스크립트 함수가 필요하다.

기존의 첫 댓글화면과 유사한 구조이지만 다른 이름을 부여 해서

다음과 같이 별도의 화면(replyDialog와 form3)을 만들어야 한다.

폼의 컨트롤은 댓글이 달리는 게시물번호(brdno), 부모글번호(reparent), 수정을 위해 자기 댓글번호(reno)가 숨져진 필드로 저장되고,

사용자가 입력하는 댓글 내용(rememo)과 작성자(rewriter)가 필요하다.

이 컨트롤들의 이름은 게시물에 대한 댓글이나 수정시 사용하는 컨트롤과 이름이 동일하다.

이름이 동일해도 폼 이름이 form3으로 다르다.

<div id="replyDialog" style="width: 99%; display:none">
    <form name="form3" action="board6ReplySave" method="post">
        <input type="hidden" name="brdno" value="<c:out value="${boardInfo.brdno}"/>">
        <input type="hidden" name="reno">
        <input type="hidden" name="reparent">
        작성자: <input type="text" name="rewriter" size="20" maxlength="20"> <br/>
        <textarea name="rememo" rows="3" cols="60" maxlength="500"></textarea>
        <a href="#" onclick="fn_replyReplySave()">저장</a>
        <a href="#" onclick="fn_replyReplyCancel()">취소</a>
    </form>
</div>

BoardRead.jsp

hideDiv 함수는 수정하거나 댓글 작성 화면을 가진 DIV 들을 숨기는 함수로

반복되어 사용하는 것이라 함수로 처리했다.

지정된 DIV 테그의 ID값으로 컨트롤(HTML Element)을 찾아서 화면에서 안보이게(display = "none") 처리한다.

그리고 부모를 document.body로 바꾸어 준다.

현재 있는 위치에는 기존 댓글이 있기 때문에 기존 댓글 수정시 문제를 일으킬 수 있어 다른 곳으로 옮겨 주는 것이다.

나머지 3개의 함수는 댓글 수정에서 사용한 것과 유사하게 작성되었는데

부모 댓글 번호를 가지는 것과

수정에서는 댓글 내용이 있는 위치에 댓글 내용을 지우고 수정 폼이 놓이게 되는데

댓글의 댓글에서는 댓글 내용 뒤에 추가(appendChild)해준다.

function hideDiv(id){
    var div = document.getElementById(id);
    div.style.display = "none";
    document.body.appendChild(div);
}

function fn_replyReply(reno){
    var form = document.form3;
    var reply = document.getElementById("reply"+reno);
    var replyDia = document.getElementById("replyDialog");
    replyDia.style.display = "";
   
    if (updateReno) {
        fn_replyUpdateCancel();
    }
   
    form.rememo.value = "";
    form.reparent.value=reno;
    reply.appendChild(replyDia);
    form.rewriter.focus();
}
function fn_replyReplyCancel(){
    hideDiv("replyDialog");
}

function fn_replyReplySave(){
    var form = document.form3;
   
    if (form.rewriter.value=="") {
        alert("작성자를 입력해주세요.");
        form.rewriter.focus();
        return;
    }
    if (form.rememo.value=="") {
        alert("글 내용을 입력해주세요.");
        form.rememo.focus();
        return;
    }
   
    form.action="board6ReplySave";
    form.submit();   
}

BoardRead.jsp

계층형 댓글의 수정은 일반 댓글과 같이 댓글 번호(reno)를 이용하기 때문에 다른 처리를 하지 않아도 된다.