AJAX alert창 후 reload

AJAX alert창 후 reload

QA

AJAX alert창 후 reload

답변 2

본문

안녕하세요. 어제 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처리 후 리턴해주는 데이터를 리로드 처리하기 전에 실행 해주면 될거에요

다만 현재 리턴 데이터를 기준으로는 조금 수정이 필요할듯 보입니다.

 

 

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 73
© SIRSOFT
현재 페이지 제일 처음으로