[개발일지3] AJAX 댓글 수정

김희주·2022년 10월 15일

개발일지

목록 보기

3/10

1. 구현 목표 화면

뇌절에 뇌절을 거듭하는 것 같지만(ㅋㅋㅋ) 또 이 화면이다.
원래 기획안에는 '수정'버튼이 없었지만, ajax로 한번 만들어보기로했다. 내가 만든건 리뷰지만, 사실 만들고 나니 댓글기능과 다를 바 없다...ㅋㅋㅋ

실제 구현 화면

👇👇👇👇👇👇👇수정버튼을 누르면👇👇👇👇👇👇👇👇👇

2. 맞닥트린 문제점

2-1. 자식요소, 부모요소, 형제요소 찾기

아놔 진짜 프론트 개발자님들 존경한다. 어떻게 노드를 하나하나 다 찾아서 또 새롭게 만들어내고....진짜 미치는 줄; 이는 밑에 가서 무슨 말인지 다시 설명하겠다.

2-2. ajax 두 번 호출

아 놔. 이번 세미프로젝트 하길 정말 잘했다. 나는 ajax에 정말 약하다! 한 함수 내에서 ajax를 두번 호출하니, 어쩔 때는 두 ajax가 한번에 다 실행되고 어쩔땐 첫 번째 ajax만 호출되는 기이한 현상이; 벌어졌다. 구글링 해보니 비슷한 사례가 많은 것 같아 이를 방지하는 방법을 찾아냈다.

3. 해결

3-1. 자식요소, 부모요소, 형제요소 찾아 새 html 만들어내기

이는 리뷰 수정 버튼을 눌렀을 때 일어나는 일들을 풀어낸 코드다.

//리뷰 수정 버튼 클릭
$(document).on('click', '#bt', function(e) {
		console.log('성공');
	//원래 적혀있던 리뷰 텍스트 내용 불러와 변수에 저장해놓기
    var val = this.parentNode.childNodes[3].childNodes[3].innerText;
//그리고 원래 댓글이 적혀있는 부분을 비워버리고
   this.parentNode.childNodes[3].childNodes[3].innerText= "";
//비워버린 곳에 댓글 입력 창을 만든다. + 댓글 입력창에 원래 댓글 내용을 띄워 수정할 부분만 골라 수정할 수 있게 한다.
   this.parentNode.childNodes[3].childNodes[3].innerHTML='<textarea cols="10" rows="10" name="review_content">'+val+'</textarea>';
//수정 완료 버튼을 만든다.
    this.parentNode.childNodes[3].childNodes[3].innerHTML += '<button id="revModify"> 수정완료 </button>';
	this.innerHTML= "";
	
	this.parentNode.childNodes[5].remove();
	
	});

3-2. 서로 다른 ajax 함수 두 개 호출하기

//위 코드에서 동적으로 생기게 만든 '리뷰 수정'버튼을 누르면 생기는 일 
$(document).on('click', '#revModify', function(e) {
//해당 리뷰의 reivew_no을 불러와 저장한다.
       var review_no =  this.parentNode.nextSibling.nextSibling.value;
//수정된 리뷰 내용값을 저장한다.
       var review_content = this.previousSibling.value;
		
		
		$.ajax({
		
			type: "GET",
			url: "/review/modify?review_no="+review_no+"&review_content="+review_content,
			datatype: "html",
			async:false,
			success: function(data) {
				console.log("DB상 수정 완료");
			}
			
		}) 
	
	  var hotel_no = <%=hotelDetail.getHotel_no() %>
      var selectedOption = this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.childNodes[1].childNodes[3].value
      $.ajax({
         type: "GET",
     	url: "/review/list?hotel_no="+hotel_no+"&selectedOption="+selectedOption,   
		datatype: "html",
		async:false,
         success: function(data) {
            $("#result").html(data);
  	      console.log('프론트 바꾸기도 성공');
         }
      }) 
		
	});