15강) Django 댓글 수정하기 ( Ajax Update )

이번 시간에는 Ajax를 이용해서 댓글 수정을 해보겠다

 

일단 【수정】 버튼을 만들어 준다.

 

삭제도 나중에 추가할 거라서 【삭제】 버튼, 【취소】 버튼 등을 만들어 주도록 한다 

 

한번에 다 적자

 

{{ item.id }} 를 이용해서 class명을 고유하게 번호 ( reply의 Id )를 붙여 준다 ( 그래야 선택한 요소를 찾을 수 있음 )

 

onclick=함수에도 고유한 번호 ( reply의 Id )를 넘겨 주도록 한다

 

그리고 【진짜 수정】 버튼과 【취소】 버튼은 처음에는 안 보이도록 하게 한다

{% if item.member.id == session %}
  <td class="tdReplyUpdate{{ item.id }}"><input type="button" value="수정" onclick="replyUpdate({{ item.id }})"></td>
  <td class="tdReplyDelete{{ item.id }}"><input type="button"  value="삭제" onclick="replyDelete({{ item.id }})"></td>
  <td class="tdReplySubmit{{ item.id }}"  style="display:none"><input type="button"  value="진짜 수정" onclick="replySubmit({{ item.id }})"></td>
  <td class="tdReplyUpdateCancel{{ item.id }}"  style="display:none"><input type="button"  value="취소" onclick="replyUpdateCancel({{ item.id }})"></td>
{% endif %}

 

 

이거 같은 경우는 게시판의 【수정】, 【삭제】, 【진짜 수정】, 【취소】와 다를 것이 없다

 

그리고, onclick에 있는 함수 이름 그대로 함수를 작성해 보자

 

 

그리고 그 밑에 부분에는 함수를 작성했다

 

onclick='replyUpdate(id)' 부분이다

 

넘겨받은 아이디로 지지고 볶고 하면 된다

const replyUpdate = (id) => {
  let tdReplyUpdate = document.querySelector(`.tdReplyUpdate${id}`);
  let tdReplyDelete = document.querySelector(`.tdReplyDelete${id}`);
  let tdReplySubmit = document.querySelector(`.tdReplySubmit${id}`);
  let tdReplyUpdateCancel = document.querySelector(`.tdReplyUpdateCancel${id}`);

  console.log(tdReplyUpdate);
  tdReplyUpdate.style.display = 'none';
  tdReplyDelete.style.display = 'none';
  tdReplySubmit.style.display = 'inline-block';
  tdReplyUpdateCancel.style.display = 'inline-block';
}

 

이렇게 까지만 하면 【수정】 버튼을 눌러보았을 때, 【진짜 수정】 버튼과, 【삭제】 버튼이 생겨날 것이다

 

밑에 5번째 줄에 있는 수정을 눌러보자

 

5번째 손님이 당첨되었습니다

 

고유한 ID로 버튼을 찾아 사라지게 하고 생겨나게끔 할 수 있다

 

디자인은 버리자 일단..

 

그리고 수정을 해야 하는데 버튼만 사라지게 하고 생겨나게 했다

 

이젠 글을 적을 수 있도록 해보자

 

일단 글의 내용 쪽이 일반 td로 되어 있는데,,, 텍스트 박스로 바꿔야겠다

 

여기도 고유의 ID를 붙인 class를 생성해 준다

<td><input type="text" class="replyContent{{ item.id }}" value="{{ item.content }}" readonly></td>

 

그러고 나서 다시 【수정】 버튼을 눌렀을 때, readOnly가 풀리도록 해야겠다

 

간단하게 두개만 추가한다

 

이렇게 하고 브라우저로 테스트해보자

 

이상태일 테는 readOnly이기 때문에 아무거도 입력할 수 없다

 

이상태에서 【수정】 버튼을 눌러보자

 

 

누르고 글을 적으려고 해 보면 잘 적힌다!

 

또 말썽피지말고 순순히 복종해!

 

자 이제는 【진짜 수정】 버튼에 함수를 추가해보자!

 

될까? 나도 첨 해본다

 

일단 필요한 게 reply의 ID가 필요할 거 같고, 거기에 내용만 바꾸면 될 문제이기 때문에 데이터를 아래처럼 만들어 보았다

 

let replyContent = document.querySelector(`.replyContent${id}`).value;
let param = {
  'id': id,
  'content': replyContent
}

 

그리고 path를 만들자

 

이제 설명은 생략한다

 

그다음 views.py에서 replyUpdate라는 함수를 작성하자

 

또 뭔가 새롭다

Ajax에서 받은 ID로 댓글을 하나 찾는다

reply = Reply.objects.filter(id=jsonObject.get('id'))

 

reply를 찾았을 때 있으면 if문을 타게 한다

if reply is not None:

 

if분기문을 탄경 우는 변경된 내용으로 update 한다

reply.update(content=jsonObject.get('content'))

 

아래와 같은 경우는 제대로 됐냐 안됬냐를 판단시켜준다

 

실패할 경우는 브라우저에 no를 던져주게 하고, 성공한 경우는 ok를 던져준다

context = {
	'result': 'ok'
}

 

그리고 【진짜 수정】 버튼을 눌러보자

 

됬으면 좋겠다 한번에

 

개발자 도구의 consol를 보면 ok가 왔다! 성공했다는 것이다

 

Ok yeah~

 

그다음은 Ajax 부분도 조금 수정한다

 

이같은경우는 복잡하니까 따로 함수를 만들어주는게 좋을꺼에용 ㅎㅎ 

 

이 부분만 설명하면 될 것 같다

 

Ajax 통신을 해서 반환된 데이터를 받았을 때 

 

값이 'ok'인 경우만 실행되도록 한다는 의미다

if (data.result == 'ok') {

}

 

이렇게 하면 브라우저에서 【진짜 수정】 버튼을 눌렀을 때

 

텍스트 박스는 readOnly가 될 것이고, 【진짜 수정】 버튼과 , 【취소】 버튼은 사라지며, 【수정】 버튼과 【삭제】 버튼이 생겨날 것이다

 

이상으로 Ajax를 이용한 댓글 수정 놀이를 마치겠다

 

다음 시간에는 Ajax를 이용해 삭제 기능을 끄적여 보겠다