세미프로젝트) 외부 모달창으로 게시글 삭제하기

외부 모달창은 myhappyman.tistory.com/179 이 분의 모달을 사용하였다~~~ 

 

 

모달창을 이용하여 게시글을 삭제하시겠습니까? 클릭하면 모달창을 띄운다.

게시글을 삭제하시겠습니까?를 누르면 ajax를 통해 해당 리뷰의 번호와 어떤 레시피번호인지가 전송된다.

확인을 누르면 보여지는 화면이다.

이제부터 코드-------------------------------------------------------------------------------------------------------

js 파일

serialize를 통해 가져오려했는데 레시피 번호는 잘 들어오는데 리뷰 번호가 해당 화면에 있는 리뷰번호를 다 가져와서.. 리뷰 제목 클릭시 리뷰 콘텐츠 보여주기로 썼던 코드를 재사용하기로했다~

전역변수로 리뷰 번호 선언했음!

var rnoText = "";
$("body").on("click", "[id^=rsub-]", function(event) {    
    var vId = this.id;
	var v = document.getElementById(vId);
	var rno = v.previousSibling.previousSibling.previousSibling.previousSibling.previousSibling.previousSibling;
	rnoText = $(rno).text();
});

 

function goList(){
	console.log("reviewNo : " + rnoText);
	var recipeCode = document.getElementById("recipeCode").value;
	console.log("recipeCode : "+ recipeCode);
	
	$.ajax({
		url: "reviewRemove",
		type:"POST",
		data : {
			recipeCode : recipeCode,
			revieNo : rnoText
		},
		success : function(data){
			console.log("성공!");
			window.location = "reviewListInquiry";
		},
		error : function(request, status, error){
			console.log("에러남!");
		}
	});
}

서블릿으로 전송 데이터를 보내는 함수를 만들었다.

 

$(function () {
    $(document).on("click", "[id^=delete_modal-]", function () {
        action_popup.confirm("게시글을 삭제하시겠습니까?", function (res) {
            if (res) { 
				action_popup.alert("정상적으로 삭제되었습니다.");				
				goList();
            }
        })
    });

    $(".modal_close").on("click", function () {
        action_popup.close(this);
    });
});

그리고 긁어온 소스코드에서 삭제버튼을 누르고 정상적으로 삭제되었다는 alert 창까지 완료 한 후에 goList함수를 실행시키는 방식으로 했다.

 

그 결과 

콘솔에서 찍어보니 데이터가 잘 전송되었다~

 

이제 서블릿 페이지 작업해보자.

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		execute(request, response);
	}

	
	
	private void execute(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("들어오기 성공!");
		
		ReviewService rsv = new ReviewService();
		
		int result = 0;
		
		Review review = new Review();
		review.setRecipeCode(Integer.parseInt(request.getParameter("recipeCode")));
		review.setReviewNo(Integer.parseInt(request.getParameter("reviewNo")));
		
		result = rsv.deleteReview(review);
		
		
	}

service에 보낼 데이터를 review에 담아서 보냈다.

 

dao랑 service 작업만 해주면 정상적으로 삭제처리 된다.