Кнопка возврата Ajax с динамическим контентом

Question

Я создал страницу с использованием JQuery и Ajax, которая помогает пользователю отфильтровать ряд параметров и в конечном итоге отображает отфильтрованный список продуктов, соответствующих их спецификации.

Это все отлично работает.

Проблема, с которой я столкнулся, - это проблема «кнопки возврата» с Ajax, я знаю, как обойти это с помощью якорей статического содержимого (то есть Filter.php # Step2).

Однако страница работает, возвращая список спецификаций продукта, когда щелкает ссылка на спецификацию, Ajax загружает ту же страницу снова, применяя параметры ссылок, это повторяется до шести раз, после чего пользователь перенаправляется на URL отфильтрованного продукта.

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

Кто-нибудь знает, возможно ли это?

Answer 1

Каждый раз, когда вы захотите вернуться к предыдущему шагу, меняйте window.location.hash.

Т.е..

window.location.hash = 'step1';

Это изменяет часть #foo в URL. Вам также понадобится таймер в JavaScript, который проверяет, был ли изменен хеш, поскольку нет способа надежно обнаружить нажатие кнопки «назад». Что-то вроде ...

var oldHash = window.location.hash;
setInterval(function(){
  if(window.location.hash != oldHash) {
    //the hash was changed, do something
  }
}, 50);

Надеюсь, это поможет

Answer 2

Не могу сказать, что я реализовал это раньше лично, но я помню, что компонент вкладки jQuery Tools делал нечто подобное. Я не уверен, сработает ли это для вашей конкретной ситуации, но, возможно, стоит рассмотреть их подход как отправную точку.

jQuery Tools AJAX: редактирование вкладок с поддержкой истории