AJAX alert창 후 reload

dhdl52 3년 전 조회 3,396

안녕하세요. 어제 AJAX 후 스크롤 고정 관련되어서 질문을 올렸는데요!

(https://sir.kr/qa/470670?&vpage=1#answer_470717)

추가적인 질문이 있어서 질문 드립니다!

</p>

<p><script></p>

<p>        window.onload = function(){</p>

<p>            var strCook = document.cookie;</p>

<p>            //alert(strCook);</p>

<p>            if(strCook.indexOf("!~")!=0) {</p>

<p>                var intS = strCook.indexOf("!~");</p>

<p>                var intE = strCook.indexOf("~!");</p>

<p>                var strPos = strCook.substring(intS+2,intE);</p>

<p> </p>

<p>                document.getElementById("product_table").scrollTop = strPos;</p>

<p>            }</p>

<p>        }</p>

<p> </p>

<p>        function SetDivPosition(){</p>

<p>            var intY = document.getElementById("product_table").scrollTop;</p>

<p>            document.title = intY;</p>

<p>            document.cookie = "yPos=!~" + intY + "~!";</p>

<p>        }</p>

<p></script></p>

<p>

위의 코드를 header 내에 입력해주니까, 새로고침해도 스크롤이 잘 고정되는 것을 확인했습니다.

다만, AJAX로 넘어간 페이지에서 필요한 기능을 끝낸 후 다시 돌아왔을 때, alert창이 뜨지 않고 페이지가 새로고침 되는 것을 확인했습니다.

</p>

<pre>
<code><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');
               </code>window.location.reload();  // -> reload로 작성해주면 스크롤 적용은 되지만, alert창이 뜨지 않음<code>
               //$('#product_table').html(data);      // product_table 은 DB의 데이터가 들어있는 table 
                   // --> 이 코드를 작성하면 ajax 후 새로고침 시 스크롤 적용이 안됨
           }
      })
});
</script></code></pre>

<p>

// index_main_update.php

</p>

<pre>
<code>     // DB 연결 후 수정하는 쿼리 존재
     //
     //
     // 쿼리 적용 후
    if (sqlsrv_query($connect, $insert_H_query)) {  
        $output .= '<script>alert(`해당 품명이 수정되었습니다.`);</script>';
        $output .= '<script>location.href=`index_main.php`</script>';
    }</code></pre>

<p>

혹시 AJAX alert 창 후 reload 하는 방법이 있을까요?

#php #ajax #alert #reload

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

정렬:

허리업2

3년 전

리로드 하는 바로 위에서 알럿창 띄우면 될거 같은데요.

alert("TEST"); window.location.reload();

위처럼 적용하면 기본적으로 alert 실행이 되고나서 리로드가 됩니다.

그러니 DB처리 후 리턴해주는 데이터를 리로드 처리하기 전에 실행 해주면 될거에요

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

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

아르키어드

3년 전

비동기 결과값이 도착 하기전에 아래 리로드 함수가 먼저 실행되는 경우가 있어서 결과값을 제이슨형태로 리턴하고 해당결과값에 따라 success함수에서 처리하는 형식이 더 낫다고 어제 말씀 드린거에용

저런 경우까지 생각하면 promise 나 async / await 를 이용해 함수실행 우선순위를 정해줘야할거에요

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인

AJAX alert창 후 reload

답변 2개

공유하기