[javascript]삭제 시 경고창 띄워주기

삭제 시 경고창 띄워주기

현재 post 한 글과 댓글이 삭제 버튼을 누르게 되면 망설임없이 바로 삭제 된다. 삭제 시에는 복원이 불가능하고 실수할 가능성이 있기 떄문에 경고창을 띄워서 이를 해결하자. post한 글과 댓글 경고창을 처리한 방식의 약간의 차이가 있어서 따로 다뤄주겠다.

post 글 삭제 경고창

우선 기존의 삭제는 a 태그를 통해서 글을 삭제하는 기능을 수행하도록 url을 넘겨주었다.

<a href="{% url 'delete' cat.id %}">Delete<ion-icon name="trash"></ion-icon></a>

이제 바로 url을 넘겨주지 않고 modal 을 띄워준 후 modal 에서 삭제하기 를 누를 시 이 url로 넘어가도록 하겠다. 기존의a 태그를 수정해주자.

<a href="#" data-toggle="modal" data-target="#CatModal">Delete<ion-icon name="trash"></ion-icon></a>

• data-toggle="modal": 모달 창을 여는 역할
• data-target="#CatModal": 모달의 id로 연결해주는 역할

 

경고창은 bootstrap의 modal을 사용하였다.

<div id="CatModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">UOSCAT</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
       <div class="modal-body">
          <p>진짜로 내용을 삭제하시겠습니까?</p>
       </div>
       <div class="modal-footer">
          <button onclick="CatDelete()" type="button" class="btn btn-primary">삭제하기</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">취소하기</button>
       </div>
      </div>
    </div>
</div>

id 로 연결을 했기 때문에 위와 같은 id를 부여했다. 다음으로 주의깊게 봐야할 부분은 삭제하기 버튼이다.

<button onclick="CatDelete()" type="button" class="btn btn-primary">삭제하기</button>

button 으로는 url을 넘길 수 없기 때문에 js의 onclick() 을 이용하여 이를 구현했다.

  function CatDelete() {
    location.replace("/detail/{{cat.id}}/delete");
  }

 

댓글 삭제 경고창

위와 같은 논리로 똑같이 진행을 했지만 js에서 url을 넘겨주는 부분에서 문제가 생겼다.

기존의 a태그 는 다음과 같이 cat.id 와 comment.id 를 둘 다 넘겨줘서 해당 id로 삭제할 댓글을 찾아서 삭제를 하게 된다.

<a href="{% url 'comment_delete' cat.id comment.id %}"><ion-icon name="close"></ion-icon>

따라서 이를 js 로 다음과 같이 구현하고 싶지만 html로 comment를 넘겨오지 못했다.

function CommentDelete(){
    location.replace("/detail/{{cat.id}}/commentdelete/{{comment.id}}");
  }
// 오류

그래서 편법을 사용하였는데 먼저 댓글을 출력하는 부분에서 id 로 함께 출력하도록 했다.

{% for comment in cat.comment_set.all %}
  <div class="row">
    <div class="col-sm-6">
      <div class="comment">
        <div class="comment-body">
          <div class="comment-content">
            <div class="comment-content-first-row">
              <div>
                <ion-icon name="contact"></ion-icon>
              </div>
              <h5 class="comment-title">유저이름</h5>
            </div>
            <p class="hidden_comment_id">{{comment.id}}</p>
            <h6>{{comment.comment_date | date:'Y-m-d'}}</h6>
            <p class="comment-text">{{comment.comment_contents}}</p>
          </div>
          <div class="comment-delete">
              <a data-toggle="modal" data-target="#CommentModal" href="#">
              <ion-icon name="close"></ion-icon>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <hr>

그리고 id 부분은 사용자는 보지 못하도록 자리도 차지하지 않고 보이지도 않도록 숨겨주었다.

 .hidden_comment_id{
      display: none;
  }

그 후 js 를 사용해 이 div 에 접근하여 값을 가져와 url 에 추가해주었다.

function CommentDelete(){
    var comment_id = $('.hidden_comment_id').text();
    location.replace("/detail/{{cat.pk}}/commentdelete/"+comment_id);
  }