PHP AJAX 후 스크롤 고정

dhdl52

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2022-08-18 (목) 17:39:08 4,440

안녕하세요. 현재 제가 DB에 있는 데이터를 수정할 수 있는 화면을 만들고 있습니다.

[수정] 버튼을 클릭하면 수정Modal창이 뜨게 되고, 해당 모달 창 내에서 '수정' 버튼을 클릭하게 되면 AJAX를 통해 넘어간 페이지에서 수정 Query를 해결한 후 다시 기존 화면으로 돌아오게 됩니다.

이때, 저는 update query를 완료한 후에 다시 돌아올 때 해당 페이지로 location.href를 시켜줬더니 스크롤이 해당 수정 데이터에 머물러있는게 아니라 맨 위로 올라가게 됩니다.

이러한 현상을 해결하고 싶습니다.

1935365004_1660811856.7136.png

// index_main.php

Copy

<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">&times;</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');

               $('#product_table').html(data);      // product_table 은 DB의 데이터가 들어있는 table

           }

      })

});

</script>

// index_main_update.php

Copy

// DB 연결 후 수정하는 쿼리 존재

     //

     //

     // 쿼리 적용 후

    if (sqlsrv_query($connect, $insert_H_query)) {  

        $output .= '<script>alert(`해당 품명이 수정되었습니다.`);</script>';

        $output .= '<script>location.href=`index_main.php`</script>';    // <-- 이 부분에서 이전 페이지로 직접 이동을 하게 되어서 새로고침하게 되고, 스크롤이 맨 위로 올라가는 문제가 됩니다.

    }

그래서 구글링을 통해 스크롤의 위치를 기억하는 코드를 찾아보았고, 아래의 코드를 기반으로 여러 코드들을 작성해줬는데도 적용이 안됩니다..

1935365004_1660811759.6074.png