모달 사용 (삭제 전에 삭제하시겠습니까?)

모달사용시 버튼을 누르지 않고 바로 삭제가 되는 것이 문제였는데

버튼에 이 내용을 추가했더니 된다 ㅎㅎ

type="button"

 

 

 

---

 

 

 

 

<div class="text-center mt-5 mb-3">
<a class="btn btn-danger" href="#" data-toggle="modal" data-target="#confirmDeleteModal">
<!-- <a class="btn btn-danger" th:href="@{/store/delete(storeIdx=${storeVO.storeIdx})}">-->
삭제하기</a>
</div>

 

<div class="modal fade" id="confirmDeleteModal" tabindex="-1" role="dialog" aria-labelledby="confirmDeleteModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmDeleteModalLabel">맛집 삭제</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 type="button" class="btn btn-secondary" data-dismiss="modal">취소</button>
<a class="btn btn-danger" th:href="@{/store/delete(storeIdx=${storeVO.storeIdx})}">삭제</a>
</div>
</div>
</div>
</div>

 

 

 

 

 

---

 

 

ajax에 onclick 사용했던 경우

 

 

<button type="button" onClick="openCancelModal()" class="iamport kakaoBtn2">결제 취소</button>


<!-- 결제 취소 확인 모달 -->
<div id="cancelModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="cancelModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="cancelModalLabel">환불</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                결제를 정말 취소하시겠습니까?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">취소</button>
                <button type="button" class="btn btn-danger" onClick="cancelPay()">확인</button>
            </div>
        </div>
    </div>
</div>

 

<script>

    function openCancelModal() {
        $('#cancelModal').modal('show');
    }


    function cancelPay() {
        $.ajax({
            url: "/pay/inicisCancel",
            type: "POST",
            contentType: "application/json; charset=UTF-8",
            data: JSON.stringify({
                "merchant_uid": '[[${inicisVO.merchant_uid}]]',  //실제 데이터로 변경하기
                "cancel_request_amount": [[${inicisVO.amount}]], // 환불금액
                "reason": "테스트 결제 환불", // 환불사유
                "token" : '[[${inicisVO.token}]]',
                "imp_uid" : '[[${inicisVO.imp_uid}]]'
            }),
            /* dataType: "json",*/
            dataType: "json",
            async: false,
            success : function(data) {
                console.log("inicis 환불 성공!");
                console.log(data.a);
                if ( data.a == "환불성공") {
                    location.href='/pay/payNothing?message=complete';
                }
            }, error: function(xhr, status, error) {
                console.log("에러 발생");
                console.log(xhr);
            }
        });
        return false;
    }
</script>

 

 

 

---

 

 

<!-- HTML 코드 -->
<form id="cancelForm" method="post" th:action="@{/pay/refund(tid=${info.tid})}">
    <button class="kakaoBtn2" type="button" data-toggle="modal" data-target="#cancelModal">결제 취소</button>
</form>

<!-- 모달 창 -->
<div class="modal fade" id="cancelModal" tabindex="-1" role="dialog" aria-labelledby="cancelModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="cancelModalLabel">환불</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                결제를 정말 취소하시겠습니까?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">취소</button>
                <button type="button" class="btn btn-primary" id="confirmCancelBtn">확인</button>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById("confirmCancelBtn").addEventListener("click", function() {
        document.getElementById("cancelForm").submit();
    });
</script>