수정과 관련된 입력 폼은 앞서 삭제에서 같이 만들었다.
삭제에서는 댓글 번호를 넣어 전달했고
수정에서는 댓글 번호와 댓글 내용을 넣어서 전달한다.
다만, 댓글 쓰기에서 같은 형태의 입력처리를 했기 때문에 충돌을 막기 위해
댓글 쓰기에서는 form1으로 폼 태그의 이름을 부여했고
댓글 수정에서는 form2으로 폼 태그의 이름을 부여했다.
즉, 게시물에 대하여 작성하는 댓글의 댓글내용(rememo)와
수정시 사용하는 댓글내용(rememo)의 컨트롤(HTML Tag) 이름이 동일해도 문제가 생기지 않는 것은
컨트롤들이 속한 폼 이름이 달라서 그런 것이다.
폼 이름이 다르면 각 폼 안의 컨트롤은 이름이 같아도 구별되어 사용된다.
댓글 내용인 rememo은 form1.rememo와 form2.rememo로 다르게 처리한다.
수정 SQL(UPDATE)문은 댓글 쓰기 처리시 같이 작성했다 (updateBoard5Reply).
따라서 남아 있는 것이 화면 처리이고,
이 화면 처리는 자바 스크립트를 이용하여 다소 복잡하게 구현해야 한다.
사용된 자바 스크립트 함수는 3가지로
수정 버튼을 누르면 수정 폼을 화면에 보여주는 함수(fn_replyUpdate),
수정 후 저장 버튼을 누르면 서버로 전송하는 함수(fn_replyUpdateSave),
수정하나 취소 버튼을 눌러서 입력 폼을 감추는 함수(fn_replyUpdateCancel) 로 구성되어 있다.
var updateReno = updateRememo = null;
function fn_replyUpdate(reno){
var form = document.form2;
var reply = document.getElementById("reply"+reno);
var replyDiv = document.getElementById("replyDiv");
replyDiv.style.display = "";
if (updateReno) {
document.body.appendChild(replyDiv);
var oldReno = document.getElementById("reply"+updateReno);
oldReno.innerText = updateRememo;
}
form.reno.value=reno;
form.rememo.value = reply.innerText;
reply.innerText ="";
reply.appendChild(replyDiv);
updateReno = reno;
updateRememo = form.rememo.value;
form.rememo.focus();
}
function fn_replyUpdateSave(){
var form = document.form2;
if (form.rememo.value=="") {
alert("글 내용을 입력해주세요.");
form.rememo.focus();
return;
}
form.action="board5ReplySave";
form.submit();
}
function fn_replyUpdateCancel(){
var form = document.form2;
var replyDiv = document.getElementById("replyDiv");
document.body.appendChild(replyDiv);
replyDiv.style.display = "none";
var oldReno = document.getElementById("reply"+updateReno);
oldReno.innerText = updateRememo;
updateReno = updateRememo = null;
}
BoardRead.jsp
저장 버튼 처리는 댓글 입력 여부만 확인하는 단순한 코드로 작성했다.
수정 폼을 화면에 보여주는 기능과 숨기는 기능은 제법 복잡한 처리를 해야 한다.
자바 스크립트의 document.body, document.form2, document.getElementById,.appendChild 등은 찾아보길 바라고 여기서는 간단하게 넘어간다.
수정 폼을 화면에 보여주는 함수(fn_replyUpdate)는
숨겨져 있는 댓글 입력창(id=replyDiv)을 사용자에게 보여주는 것이 핵심 기능이다.
댓글 입력창을 보여주며 입력박스(rememo)에 기존에 입력한 댓글 내용을 넣어줘야 한다.
댓글 번호를 이용해서 Ajax로 서버에서 댓글 내용을 가져올 수 있지만
여기서는 화면에 출력된 리스트에서 선택한 댓글의 내용을 가져와 넣어준다.
리스트에서 선택한 댓글의 내용을 가져오기 위해
리스트를 생성할 때 각 댓글을 DIV 테그로 생성하고, 댓글번호를 이용하여 이 DIV 테그의 ID("reply"+reno)를 부여하였다.
즉, document.getElementById("reply"+reno)로 사용자가 수정하고자 하는 댓글의 내용을 가져와
입력창의 입력박스에 넣어주는 것이다 (form.rememo.value = reply.innerText;).
댓글 수정 상태에서 취소나 저장을 하지 않고 다른 글을 수정하려고 할 때,
현재 입력하던 내용을 취소하기 위해, 현재 입력하는 댓글 번호를 저장해서 가지고 있어야 한다.
updateReno는 현재 입력하는 댓글 번호로
현재 입력하던 내용을 취소하고 이전 내용을 화면에 출력하는 데 이용한다 (oldReno.innerText = updateRememo).
입력 창을 감추는 함수(fn_replyUpdateCancel)는
수정하던 댓글 내용(updateReno)를 취소하고 입력창(replyDiv)을 화면에서 보이지 않게 처리한다 (display="none”).
그리고 부모를 document.body로 바꾸어 준다.
현재 있는 위치에는 기존 댓글의 내용이 출력되어야 하기 때문에 다른 곳으로 옮겨 주는 것이다.
수정 후 저장 버튼을 누르면 입력한 내용을 서버로 전송(submit)하고,
서버에서는 내용을 데이터베이스에 저장한 후
다시 게시판 글 읽기로 돌아가("redirect:/board5Read?brdno=") 수정된 댓글이 보이게 된다.
이상의 내용에서 자바 스트립트가 조금 복잡해 보일 수 있는데
기본 개념은 입력창을 적절한 위치에 보여주고 숨기는 것이니 잘 익혀두길 바라고
여기서는 자바 스트립트로만 구성했지만
실제로는 JQuery를 이용하는 것이 조금 더 깔끔하고 쉬울 수 있다.
직접 JQuery로 변환해 보는 것도 좋을 것이고 차후에 변환할 예정이다.
'Java > 게시판 5: 댓글' 카테고리의 다른 글
| 1. 댓글 시작하기 (1) | 2016.05.15 |
|---|---|
| 2. 댓글 쓰기 (2) | 2016.05.15 |
| 3. 댓글 리스트 / 삭제 (0) | 2016.05.15 |
