댓글 내용 부분을 div로 감싸준다.
content 부분을 <div></div>
블럭으로 감싸주어야한다.
댓글마다 내용이 다르기 때문에 cno로 번호를 붙여줘서 하나씩 수정할 수 있도록 설정해준다.
댓글 작성자 정보와 작성일, 수정삭제 을 div로 감싸준다.
→ 수정버튼을 누르면 댓글번호(cno)와 댓글내용(coment)을 가져가야 한다.
변수로 넘어온 cno를 자바스크립트 수정/삭제에 담아줘야 해당 댓글'만' 수정/삭제를 해줄 수 있다.
개발자모드로 each반복문 적용되었는지 확인
//댓글 목록
function commentList(){
$.ajax({
url: '/comment/list'
, type:'get'
, data:{'pno': pno} // let pno = "${product.PRODUCT_CODE}"; //부모글 번호
, success:function(data){
//alert(data); //[object Object],[object Object],[object Object],[object Object]
let a='';
$.each(data, function(key, value){
a += '<div class="commentArea" style="border-bottom:1px solid darkgray;
margin-bottom:15px;">';
a += ' <div class="commentInfo' + value.cno + '">';
a += ' 댓글번호:' + value.cno + ' /작성자 : ' + value.wname + " " + value.pno;
a += ' <a href="javascript:commentUpdate(' + value.cno
+ ', \'' + value.content + '\');">수정</a>';
a += ' <a href="javascript:commentDelete(' + value.cno + ');">삭제</a>';
a += ' </div>';
a += ' <div class="commentContent' + value.cno + '">';
a += ' <p>내용 : ' + value.content + '</p>';
a += ' </div>';
a += ' </div>';
});//each end
$(".commentList").html(a);
}//success end
});//ajax() end
}//commentList() end
1) 댓글수정 - 댓글 내용 출력을 input폼으로 변경
a += ' <input type="text" value="' + content + '" id="content_' + cno + '">';
alert 확인
개발자모드로 each 반복문 적용되었는지 확인
2) 댓글수정
alert 확인
값이 잘 들어온다.
ajax 추가
// ------------------------------------------------------------- update 댓글수정
@RequestMapping("/update")
@ResponseBody
public int mCommentServiceUpdateProc(@PathVariable int cno, @RequestParam String content) throws Exception {
CommentDTO comment=new CommentDTO();
comment.setCno(cno);
comment.setContent(content);
return commentDao.commentUpdate(comment);
}//Update end
// ------------------------------------------------------------- update 댓글수정
public int commentUpdate(CommentDTO comment) {
return sqlSession.update("comment.update", comment);
}//update() end
<!-- [ update 댓글수정 ] -->
<update id="update" parameterType="kr.co.itwill.comment.CommentDTO">
UPDATE pcomment
SET content = #{content}
WHERE cno = #{cno}
</update>
function commentDelete(cno) {
$.ajax({
url : '/comment/delete/' + cno
, type : 'post'
, success : function(data) {
if(data==1){ //delete성공
commentList(); //댓글 삭제 후 목록으로 이동. 목록 출력
}//if end
}//seccess end
});//ajax() end
}//commentDelete() end
// ------------------------------------------------------------- delete 댓글삭제
@RequestMapping("/delete/{cno}")
@ResponseBody
public int mCommentServiceDelete(@PathVariable int cno) throws Exception {
return commentDao.commentDelete(cno);
}//mCommentServiceDelete end
// ------------------------------------------------------------- delete 댓글삭제
public int commentDelete(int cno) throws Exception {
return sqlSession.delete("comment.delete", cno);
}//Delete() end
<!-- [ delete 댓글삭제 ] -->
<delete id="delete" parameterType="int">
DELETE FROM pcomment
WHERE cno = #{cno}
</delete>