AJAX alert창 후 reload
본문
안녕하세요. 어제 AJAX 후 스크롤 고정 관련되어서 질문을 올렸는데요!
(https://sir.kr/qa/470670?&vpage=1#answer_470717)
추가적인 질문이 있어서 질문 드립니다!
<script>
window.onload = function(){
var strCook = document.cookie;
//alert(strCook);
if(strCook.indexOf("!~")!=0) {
var intS = strCook.indexOf("!~");
var intE = strCook.indexOf("~!");
var strPos = strCook.substring(intS+2,intE);
document.getElementById("product_table").scrollTop = strPos;
}
}
function SetDivPosition(){
var intY = document.getElementById("product_table").scrollTop;
document.title = intY;
document.cookie = "yPos=!~" + intY + "~!";
}
</script>
위의 코드를 header 내에 입력해주니까, 새로고침해도 스크롤이 잘 고정되는 것을 확인했습니다.
다만, AJAX로 넘어간 페이지에서 필요한 기능을 끝낸 후 다시 돌아왔을 때, alert창이 뜨지 않고 페이지가 새로고침 되는 것을 확인했습니다.
<div id="insert_data_Modal" style="z-index:1050;" class="modal fade" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id = "insert_title">품명 수정</h4>
</div>
<div class="modal-body">
<form method="post" id="insert_form">
// 관련 코드
</form>
</div>
<div class="modal-footer">
<button type="button" class="close_btn btn btn-default" data-dismiss="modal">닫기</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
// '수정' 모달 창에서 '수정' 버튼 눌렀을 때
$('#insert_form').on('submit', function(event) {
event.preventDefault();
$.ajax({
url:"index_main_update.php",
method:"POST",
data:$('#insert_form').serialize(),
success:function(data) {
$('#insert_form')[0].reset();
$('#insert_data_Modal').modal('hide');
window.location.reload(); // -> reload로 작성해주면 스크롤 적용은 되지만, alert창이 뜨지 않음
//$('#product_table').html(data); // product_table 은 DB의 데이터가 들어있는 table
// --> 이 코드를 작성하면 ajax 후 새로고침 시 스크롤 적용이 안됨
}
})
});
</script>
// index_main_update.php
// DB 연결 후 수정하는 쿼리 존재
//
//
// 쿼리 적용 후
if (sqlsrv_query($connect, $insert_H_query)) {
$output .= '<script>alert(`해당 품명이 수정되었습니다.`);</script>';
$output .= '<script>location.href=`index_main.php`</script>';
}
혹시 AJAX alert 창 후 reload 하는 방법이 있을까요?
답변 2
비동기 결과값이 도착 하기전에 아래 리로드 함수가 먼저 실행되는 경우가 있어서 결과값을 제이슨형태로 리턴하고 해당결과값에 따라 success함수에서 처리하는 형식이 더 낫다고 어제 말씀 드린거에용
저런 경우까지 생각하면 promise 나 async / await 를 이용해 함수실행 우선순위를 정해줘야할거에요
리로드 하는 바로 위에서 알럿창 띄우면 될거 같은데요.
alert("TEST");
window.location.reload();
위처럼 적용하면 기본적으로 alert 실행이 되고나서 리로드가 됩니다.
그러니 DB처리 후 리턴해주는 데이터를 리로드 처리하기 전에 실행 해주면 될거에요
다만 현재 리턴 데이터를 기준으로는 조금 수정이 필요할듯 보입니다.
답변을 작성하시기 전에 로그인 해주세요.