0

Есть список элементов с ajax пагинацией, кнопка "показать еще" подгружает еще несколько элементов списка. Заходим на детальную страницу элемента, например, на третьей подгруженной странице списка. Нажимаем кнопку назад - нужно сфокусироваться в списке на этом элементе т.е. подгрузить 2 страницы и прокрутить до этого элемента.


Вопрос - как лучше это реализовать?

  1. Сохранять в куках например количество загруженных страниц или id элемента, при возврате назад брать из куков эту инфу и пытаться найти элемент.
  2. При подгрузке страниц менять урл. Есть какойто стандартный способ?
2
  • Храните количество страниц и id элемента в куках. Ухищрения с url работать не будут. 18 янв 2016 в 9:37
  • Так и сделал, только сохранил в сессии. При клике на элемент (переходе на детальную) сохранил, Если загружается страница со списком - достаю эту переменную. Единственное еще пришлось очищать переменную в сессии если пользователь перешел на другую страницу (через меню например) Иначе когда зашел бы опять в каталог, подгрузились бы страницы которые не нужны. Решение от Bookin интересное, попробую (сейчас надо было сделать оперативно) Спасибо за ответы. 18 янв 2016 в 14:12

1 ответ 1

1

Вы можете использовать window.history для изменения url браузера, при нажатии на пагинацию меняете url:

history.pushState({page:3}, "page 3", "page3.html");

Url измениться на http://somesite.com/page3.html. После того как нажмут кнопку назад, браузер вернет на страницу http://somesite.com/page3.html, и вызовет событие popstate:

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

В event.state будет храниться обьект переданный в pushState - {page:3}, вы можете получить номер страницы, и загрузить недостающие части.

Так же можете использовать window.localStorage, схема примерно та же, при пагинации сохранять номер страницы в window.localStorage, при возвращении считывать номер страницы и загружать что вам необходимо. Так же можете посмотреть в сторону сессий.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.