[파이널 프로젝트] ajax로 대댓글 만들기

hanahana·2022년 11월 23일
0
post-thumbnail

프로젝트는 끝났지만 블로그에 올려야지.. 하고 안올렸던 부분이 있어서 기술하고자 한다

대댓글 창 만들기

//대댓창 만들기
function Rereply(replylNo,rPage){
	if($('#'+replylNo).children('.reReply').length<10){

			var str="";
			str+='<div class="row mt-2">'
			str+='<div class="col-md-11 col-9">'
			str+='<textarea name="reRContents'+replylNo+'" id="reply-text" rows="3"></textarea></div>'							
			str+='<div class="col-md-1 col-3 reply-button-area">'
			str+='<button id="reply-button1"token operator">+replylNo+','+rPage+')">답글</button> <button id="reply-button2"token operator">+bookNo+',\''+userId+'\','+rPage+')">취소</button></div></div>'

		
		$('#'+replylNo).append(str)
	}else{
		alert('대댓글이 10개이상인경우 작성할수 없습니다.')
	}
}

//대댓 등록
function reReplyAdd(rNo,rPage){
var rContents = $('[name=reRContents'+rNo+']').val();
	 $.ajax({
	 url:"/book/bookReReplyRegist.do",
	 type:"post",
	 data:{"reContens":rContents,"replyNo":rNo,"bookNo":bookNo,"category":"origin"},
	 success:function(){
	 
		 printReply(bookNo,userId,rPage);
	 
	 },
	 error:function(){}
	 })

}
  • ajax와 jquery를 사용했다.
    append를 써서 태그를 구성하는건 계속 실수가 있어서 문자열을 활용해 태그를 구성하기로 했다.
    이렇게 하니 내가 생각한 그대로 바로 출력할수 있어서 매우 편리했다.
  • 대댓글의 등록은 대댓글을 다는 댓글의 등록번호를 파악하여 대댓글 테이블로 보내는 방식으로 진행하였다.

대댓글 출력하기


//대댓글 출력하기
function reReplyAll(rPage,count){
	$.ajax({
		url:"/book/ReReplyPrint",
		type:"post",
		data:{"bookNo":bookNo,"category":"origin"},
		success:function(result){
			for(var i in result){
				var str ="";
					str ='<div class="row  d-flex justify-content-center repleOne reReply mt-2 ps-5" id="rRe'+result[i].reReplyNo+'">';
					str+='<div class="card ps-3 pe-3 pt-2 pb-2">';	
					str+='<div class="d-flex row justify-content-between align-items-center">';
					str+='<div class="user col-12 d-flex flex-row align-items-center">';
					str+='<span class="col-md-1 col-3 d-inline-block text-truncate">';
					str+='<small class="font-weight-bold username">'+result[i].mNickName+'</small>';
					str+='</span>';
					str+='<span class="col-md-11 col-8">';
					str+='<small class="font-weight-bold">';
					str+=result[i].reContens;
					str+='</small>';
					str+='</span>';
					str+='</div></div>';
					str+='<div class="mt-2">';
					str+='<div class="reply row">';
					str+='<div class="col-6">';
						if(userId==result[i].memberId){
							str+='<span class="modify-del-button"> <smalltoken operator">+result[i].reReplyNo+','+rPage+');">삭제</small> <smalltoken operator">+result[i].reReplyNo+','+rPage+');">수정</small>';
						}
						if(userId!=result[i].memberId && admin=='Y'){
							str+='<span class="modify-del-button"> <smalltoken operator">+result[i].reReplyNo+','+rPage+');">삭제</small>';
						}
					str+='</span></div>';
					str+='<div class="text-truncate col-6 date">';
					str+='<small>'+result[i].insertDate+'</small>';
					str+='</div></div></div>';
				
				$('#'+result[i].replyNo).append(str);
				
				}
				totalCount =count+(result.length);
				$('#replyLength').html(totalCount);
					
		},
		error:function(){}
	})
	

}
  • 댓글을 출력한 뒤에 대댓글을 별개로 출력하는 방식으로 가져왔다.
  • 해당댓글의 id를 파악하고 (id는 댓글번호를 이용해 만들어서 일벽하기 쉬웠다) 그 댓글 밑에 달릴수 있도록 하였다.
  • 해당 페이지에 있는 댓글이 아니라 모든 대댓글을 다 불러온뒤 댓글 밑에 달아주는 방식이라 약간 비효율적인것도 같다. 좀 더 효율적인 코드가 있을까 고민해보고싶다.
profile
hello world

0개의 댓글