jsp로 마우스 스크롤에 의한 페이징을 구현할 때
ajax로 불러온 데이타는 history에 남지 않는다.
● 이 때 발생되는 문제점!
1. ajax 호출(리스트) → 2.리스트 클릭하여 다른 화면 이동 → 3. 뒤로가기 눌렀을 경우
원래 클릭한 데이타에 포커스가 가야 하는데 그렇지 못하게 된다!
● 원인은 아래와 같다.
아래의 그림이 너무 잘 설명해 주고 있다.
화면이 이동하면 각 경로정보가 history에 남지만 ajax로 처리하면 첫 번째 경로 빼고는 history에 남지 않는다.
※참고
● 해결책
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 |
---|