반응형

jsp로 마우스 스크롤에 의한 페이징을 구현할 때

ajax로 불러온 데이타는 history에 남지 않는다.

 

● 이 때 발생되는 문제점!

 1. ajax 호출(리스트) → 2.리스트 클릭하여 다른 화면 이동 → 3. 뒤로가기 눌렀을 경우

원래 클릭한 데이타에 포커스가 가야 하는데 그렇지 못하게 된다!


● 원인은 아래와 같다.

아래의 그림이 너무 잘 설명해 주고 있다.

화면이 이동하면 각 경로정보가 history에 남지만 ajax로 처리하면 첫 번째 경로 빼고는 history에 남지 않는다.

 

※참고

https://beyondj2ee.wordpress.com/2013/08/16/ajax-%EB%92%A4%EB%A1%9C-%EA%B0%80%EA%B8%B0-%EB%B2%84%ED%8A%BC-%EC%9D%B4%EC%8A%88-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95/

 

● 해결책

1. 리스트 각 항목마다 id를 부여한다.

2. 리스트의 항목을 클릭할 때 hash에 그 항목의 id를 저장시킨다.

3. 뒤로가기 했을 경우를 대비하여 $( document ).ready에 아래의 로직을 추가한다.

   3.1. hash에 id값이 있다면 해당 id값이 나올 때 까지 데이타를 읽어 온다.

   3.2. 데이타를 읽어 온 후 해당 id항목에 포커스를 세팅한다.

4. 끝


 

● 참고 소스

1. 리스트 각 항목마다 id를 부여한다.

  <li id = "productList_30" >   라라라30   </li>     <li id = "productList_31" >   라라라31   </li>

  <li id = "productList_32" >   라라라32   </li>     <li id = "productList_33" >   라라라33   </li>           ...

2. 리스트의 항목을 클릭할 때 hash에 그 항목의 id를 저장시킨다.

  document.location.hash = "#" + "productList_33";     //productList_33을 클릭했다고 가정

3. 뒤로가기 했을 경우를 대비하여 $( document ).ready에 아래의 로직을 추가한다.

   3.1. hash에 id값이 있다면 해당 id값이 나올 때 까지 데이타를 읽어 온다.

    $( document ).ready(function() {

        if(document.location.hash) {
            var hash = document.location.hash.replace("#", "");
            var target = $("#" + hash);
            
            while(target.length == 0 && ('현재 Row'  < '총 List 건수') {
                1) '현재 Row' = '현재 Row' + 20; //20개씩 데이타 더해짐
                2) ajax로 데이타 호출
                3) target = $("#" + hash);     //새롭게 추가된 리스트 대상으로 타겟을 다시 확인함
            }
        }
    });

   3.2. 데이타를 읽어 온 후 해당 id항목에 포커스를 세팅한다.

    if (target.length != 0) {
        setTimeout(function() {$("html, body").animate({scrollTop : target.offset().top - 100}, 10); }, 500);
    }

4. 끝

 

ajax paging jquery ajax paging 문제 ajax history 문제 ajax 뒤로가기 document.location.hash

반응형

'IT디벨럽 > jsp,ajax,jquery' 카테고리의 다른 글

a태그 대신 사용  (0) 2016.08.02

+ Recent posts