[Spring] 스프링에서 이벤트 전/후 모달창 띄우기 (jQuery+EL 같이 쓰기)
0
글 삭제 전 "진짜 삭제?" 를 묻는 모달창을 만들기
- jsp 파일에서 간단하게 만들 수 있다.
- 모달창의 '네' 버튼에서 request가 일어나야하기 때문에 실제 삭제버튼에는 모달을 불러오는 기능만 넣는다.
<!-- 삭제 버튼 -->
<div class="button-container">
<button type="button" class="btn btn-deleteAsk btn-danger" data-toggle="modal" data-target="#deleteConfirmationModal">글 삭제</button>
<!-- 수정 버튼 -->
<a href="update.board?bno=${bno }">
<button type="button" class="btn btn-warning">글 수정</button>
</a>
</div> <!-- 모달창: 삭제 확인 -->
<div class="modal fade" id="deleteConfirmationModal" tabindex="-1" role="dialog" aria-labelledby="deleteConfirmationModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteConfirmationModalLabel">삭제 확인</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>정말 삭제하시겠습니까? 삭제하면 복구되지 않아요.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">아니오</button>
<a href="delete.board?bno=${bno}" class="btn btn-danger">네</a>
</div>
</div>
</div>
</div>자바스크립트를 통해 삭제를 확인하는 모달창을 만들어준다.
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 모달창 자바스크립트: 삭제 확인 -->
<script>
$(document).ready(function () {
// 삭제 버튼 클릭 시 모달 창 표시
$("btn-deleteAsk").click(function () {
$("#deleteConfirmationModal").modal("show");
});
});
</script>
2. 글 삭제 후 "삭제 완료"를 보여주는 모달창 만들기
- 글 삭제 후 controller 에서 model을 통해 숫자를 받아와서 모달창에 구현하는 것이라 조금 까다롭다.
- 제이쿼리 + EL 을 함께 써야한다.
Spring에서 view JS로 값이 넘어오지 않는 것 같을 때는
1. Controller에 log를 많이 찍어본다. sysout 은 위험하다. 값이 초기화되서.
2. View에 console.log를 찍어본다. 여기서 0이 나오거나 값이 안나오면
DB와 서버가 통신은 성공했으니 View에 전달이 안된것이다. 문법오류일 가능성이 크다.
나 같은 경우, 계속해서 콘솔창에 값이 나오지 않았다.
삭제 되었다면 1이 전달이 되어야할텐데.. 유령같이 사라지는 것!
로그를 찍으면 자바쪽에서는 값이 잘 출력되었다.
이것도 로그를 계속 찍으면 값이 사라지니 주의해야한다.
우선 모달창을 위한 바디.
<!-- 모달창: 글 삭제 성공시 목록으로 돌아옴 -->
<div class="modal fade" id="articleDeleteSuccess" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<h5 class="modal-title" id="articleDeleteSuccessIndex">${delText}</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
</div>
</div>
</div>
</div>그리고 controller 의 model 값을 받아오기 위해서는 EL을 사용해야한다.
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 모달창 스크립트: 글삭제 성공시 -->
<script>
$(document).ready(function () {
const delResult = <%= request.getParameter("delResult") %>;
const bno = <%= request.getParameter("bno") %>;
let delText = ""; // 빈 문자열로 초기화
console.log("1");
console.log(delResult);
console.log(bno);
if (delResult === 1) {
console.log("if");
delText = bno + " 번 게시물 삭제 성공!";
$("#articleDeleteSuccessIndex").text(delText);
$("#articleDeleteSuccess").modal("show");
} else if (delResult === 0) {
delText = "삭제 실패";
$("#articleDeleteSuccessIndex").text(delText);
$("#articleDeleteSuccess").modal("show");
}
});
</script>그런데 EL을 사용하면서 값이 넘어오지 않는 문제가 있었다.
기존 JSP Scriptlet을 사용하면 값이 잘 넘어왔다.
그런데 EL을 사용하면 이상하게 값이 안넘어오고, 모달창도 안뜨는 것이었다.
그 이유는 스크립트릿 자체는 자바(서버) 단에서 실행되고,
EL은 브라우저 클라이언트단에서 실행되다보니 EL의 경우 int 1 이 도착해도 이를 String으로 받는 것이었다.
스크립트릿이 나는 편한데.... 코드가 복잡해지고 혼란이 될 수 있어서 EL을 써야한다고 하니
내가 외우는 수밖에 없다.
EL을 사용할 땐 parseInt를 꼭 잊지마세요!
간단한 건데 이걸 까먹어서 몇번을 헤맸다.
이상 model에서 받아서 모달창 만들기를 해보았습니다.
(੭˙ ˘ ˙)੭🌱 자란다, 잘한다!