목록으로

PHP AJAX 후 스크롤 고정 채택완료

dhdl52 3년 전 조회 3,729

답변 3

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

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

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

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

// index_main.php

</p>

<p><div id="insert_data_Modal" style="z-index:1050;" class="modal fade" data-backdrop="static"> </p>

<p>    <div class="modal-dialog"></p>

<p>        <div class="modal-content"></p>

<p>            <div class="modal-header"></p>

<p>                <button type="button" class="close" data-dismiss="modal">&times;</button></p>

<p>                <h4 class="modal-title" id = "insert_title">품명 수정</h4></p>

<p>            </div></p>

<p>            <div class="modal-body"></p>

<p>                <form method="post" id="insert_form"></p>

<p>                  // 관련 코드</p>

<p>                </form></p>

<p>            </div></p>

<p>            <div class="modal-footer"></p>

<p>                <button type="button" class="close_btn btn btn-default" data-dismiss="modal">닫기</button></p>

<p>            </div></p>

<p>        </div></p>

<p>    </div></p>

<p></div></p>

<p> </p>

<p> </p>

<p><script></p>

<p>$(document).ready(function(){</p>

<p>    // '수정' 모달 창에서 '수정' 버튼 눌렀을 때</p>

<p>    $('#insert_form').on('submit', function(event) {</p>

<p>        event.preventDefault();     </p>

<p>        $.ajax({           </p>

<p>           url:"index_main_update.php",</p>

<p>           method:"POST",</p>

<p>           data:$('#insert_form').serialize(),</p>

<p>           success:function(data) {</p>

<p>               $('#insert_form')[0].reset();</p>

<p>               $('#insert_data_Modal').modal('hide');</p>

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

<p>           }</p>

<p>      })</p>

<p>});</p>

<p></script></p>

<p>

// index_main_update.php

</p>

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

<p>     //</p>

<p>     //</p>

<p>     // 쿼리 적용 후</p>

<p>    if (sqlsrv_query($connect, $insert_H_query)) {  </p>

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

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

<p>    }</p>

<p>

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