PHP AJAX 후 스크롤 고정
본문
안녕하세요. 현재 제가 DB에 있는 데이터를 수정할 수 있는 화면을 만들고 있습니다.
[수정] 버튼을 클릭하면 수정Modal창이 뜨게 되고, 해당 모달 창 내에서 '수정' 버튼을 클릭하게 되면 AJAX를 통해 넘어간 페이지에서 수정 Query를 해결한 후 다시 기존 화면으로 돌아오게 됩니다.
이때, 저는 update query를 완료한 후에 다시 돌아올 때 해당 페이지로 location.href를 시켜줬더니 스크롤이 해당 수정 데이터에 머물러있는게 아니라 맨 위로 올라가게 됩니다.
이러한 현상을 해결하고 싶습니다.
// index_main.php
<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');
$('#product_table').html(data); // product_table 은 DB의 데이터가 들어있는 table
}
})
});
</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>'; // <-- 이 부분에서 이전 페이지로 직접 이동을 하게 되어서 새로고침하게 되고, 스크롤이 맨 위로 올라가는 문제가 됩니다.
}
그래서 구글링을 통해 스크롤의 위치를 기억하는 코드를 찾아보았고, 아래의 코드를 기반으로 여러 코드들을 작성해줬는데도 적용이 안됩니다..
혹시 해결 방법을 알 수 있을까요?
답변 3
어쩔수 없는 새로고침이 이루어 진다면
이렇게 쿠키 이용해서 하는 방법도 있습니다.
어차피 비동기 요청이었으니 결과값을 굳이 스크립트로 보내는것이 아니라 해당 처리에 대한 결과값을 json형태로 리턴 해주고 ajax요청의 success 함수에서 data(리턴해준 json결과값)에 따라 alert창을 띄워주면 되지않을까요..?
답변을 작성하시기 전에 로그인 해주세요.