본문으로 바로가기

[spring]sweetalert으로 Alert 구현

category 프로젝트/project 2022. 9. 1. 23:05

 

 

1. sweetalert 라이브러리를 추가한다.

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>

 

2. button 클릭시 approve() 함수 실행

<input type="button" class="sellbtn" id="btn${status.index }" onclick="approve(${status.index })" value="승인/반려">

 

3. confirmButton/cancelButton의 각각 명칭을 설정해 준 후 다음 버튼을 눌렀을때 실행되는 ajax를 걸어준다!

function approve(Vindex) {
	var user_id = $("#user_id"+Vindex).val();
 	//	alert(user_id);
        Swal.fire({
            title: user_id,
            text: "님 판매자 요청을 승인하시겠습니까?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: '승인',
            cancelButtonText: '반려'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                        url:"<%= context%>/sellerApprove",
                        data: {user_id:user_id},
                        dataType:'text',
                        success:function(data){
                            alert("승인되었습니다.");
                            $('#btn'+Vindex).val('승인');
                        }
                        });		
            } else {
               	$.ajax({
                	url:"<%= context%>/sellerReject",
                	data: {user_id:user_id},
               	 	dataType:'text',
                	success:function(data){
                    	alert("반려되었습니다.")
                    	$('#btn'+Vindex).val('반려');
                	}
                });
	  } 
	})
}

https://sweetalert2.github.io/

 

SweetAlert2

A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes

sweetalert2.github.io