52) REST 방식 댓글 구현 - 6

22.6.29

 - 마지막 6번째 댓글 구현!!

 - 마지막으로 이벤트 처리 및 삭제, 수정을 구현하면 댓글 구현이 끝난다!!!!!!!!

 

---

1) 댓글에 이벤트 처리

  - ul 클래스 chat에 이벤트를 걸고, 실제 대상은 li 태그가 되도록 코드 작성(get.js)

 

get.js

$('.chat').on('click','li', function(e) {
			// alert('쿨리구' + $(this).data('rno'));
			let rno = $(this).data('rno');
		
			replyService.get(rno, function(reply) {
				console.log(reply);
				modalInputReply.val(reply.reply);
				modalInputReplyer.val(reply.replyer);
				modalInputReplyDate.val(replyService.displayTime(reply.updateDate)).attr("readonly", "readonly");
				modal.data("rno", reply.rno)
				
				modal.find("button[id!='modalCloseBtn']").hide();
				modalInputReplyDate.closest('div').show();
				modalMoBtn.show();
				modalRemoveBtn.show();
				
				modal.modal("show");
			})

	})

 - 이는 li 태그(즉 각 댓글)을 클릭시 rno를 기준으로 데이터를 불러오는 것

 - reply 객체에 저장된 내용 작성자, 작성시간을 각 li 태그의 댓글에 각각 val함수를 이용해 미리 입력

 - 모달창에서 수정 및 삭제, 취소 버튼만 보이도록 작성

 

2) 댓글의 수정, 삭제 이벤트

 -  댓글 수정, 삭제 처리 후 댓글 목록을 갱신하는 코드 작성(get.js)

 

get.js

				// 댓글 수정
	modalMoBtn.on("click", function(e) {
		let reply = {rno : modal.data("rno"), reply:modalInputReply.val() };
		console.log(reply);
		replyService.update(reply, function(result) {
			alert(result);
			modal.modal("hide");
			showList(1);
		})
	})
	
	//댓글 삭제
	
	modalRemoveBtn.on("click", function(e) {
		let rno = modal.data("rno");
		replyService.remove(rno, function(result) {
			alert(result);
			modal.modal("hide");
			showList(1);
			
		})
		
	})

 - 수정은 입력받은 내용을 댓글 번호(rno)를 바탕으로 update 함수로 전달 후 모달창을 숨기고 목록을 새로 불러옴!

 - 삭제는 바로 댓글번호를 기준으로 remove 함수로 전달 후 모달창 숨김 + 목록 리프레시로 끝!

 

 

---

 - 드디어 댓글이 끝!!!!!!!!!! 길고 길었다!!!!!

 - 이제 파일 업로드 & 게시판 페이징 구현만 포스팅하면 끝!!!