Включение кнопки «Назад» в качестве кнопки «Отменить» в приложении Ajax

Question

У меня проблема с приложением Ajax, которое я пытаюсь настроить с помощью кнопок браузера «Назад» и «Вперед».Я использую плагин jQuery History для включения истории браузера.

Приложение состоит из страницы продуктов.Существует панель сортировки, которая позволяет пользователю сортировать товары по различным значениям.Пользователь может выбрать категорию одежды (платья, топы, низы, юбки и т. Д.), Отдел подкатегории (юбка: мини, макси, с высокой талией, бохо / хиппи и т. Д.), Размер (XS SML XL XXL).XXXL), цвет (белый, черный, серый, синий, красный и т. Д.), Эпоха и материалы.

Большинство опций активируются с помощью Ajax для загрузки последней выбранной опции в соответствующий DIV.

Так, например, чтобы выбрать цвет Черный, будет выполнен следующий код

$('#colorSort').load('colorSort.php?color=Black');

Затем, если пользователь выберет Коричневый:

$('#colorSort').load('colorSort.php?color=Brown');

Тогда, еслипользователь отменяет выбор черного:

$('#colorSort').load('colorSort.php?colorRemove=Black');

Это прекрасно работает, пока нам не нужно поддерживать кнопки «назад» / «вперед», но когда мы добавляем возможность кнопки «назад» через jQuery History, у нас возникают проблемы.Например: используя наш предыдущий пример, пользователь выбрал цвета черный и коричневый.Теперь предположим, что пользователь нажимает кнопку «Назад».Пользователь может ожидать, что его выбор цвета Брауна будет удален, но это не так, потому что загружаемый URL-адрес:

colorSort.php?color=Black, 

, а не

colorSort.php?colorRemove=Brown 

, чтоэто должно быть.

Я попытался обойти эту проблему, добавив набор параметров 'undo' в строку запроса.Так, например,

colorSort.php?color=Brown//colorRemove=Brown 

содержит текущую строку запроса до двойной косой черты и строку запроса «назад» после косой черты.Таким образом, используя этот код, если бы я знал, что была нажата новая ссылка, я мог бы загрузить текущую строку запроса (до косой черты), и если бы я знал, что была нажата кнопка «Назад», я мог бы загрузить строку запроса «назад» после косой черты.,

Но проблема в том, что нет никакого способа определить, были ли нажаты кнопки Назад / Вперед.jQuery History работает в рамках события hashchange, и это событие не делает различий (насколько мне известно) в отношении того, какое событие его вызвало.

Это моя проблема.Я был бы очень признателен, если бы супер-умные люди из StackOverflow.com могли бы помочь мне найти решение.Спасибо!

Answer 1

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

проверять условие смены цвета каждый раз

если вы нажали кнопку назад и вернулись

если скрытое поле имеет значение, сделайте цвет тем, что находится в этом скрытом поле

в данном случае коричневый

в противном случае, если скрытое поле пустое, цвет по умолчанию черный.

Надеюсь, это сработает.

Поскольку страница не отправляется, сеанс использовать нельзя.

Answer 2

проверить JQuery барбекю (кнопка "Назад" и запрос). Это позволяет вам достичь именно того, что вы хотите, сохраняя состояние, используя стандартную реализацию истории браузера. Затем он использует событие hashChange (когда поддерживается, и некоторые хитрости, когда нет), чтобы инициировать действия, когда происходят интересные вещи (например, нажав на ссылку или нажав кнопку назад)

Таким образом, вы можете щелкнуть ссылку, она добавит новый хэш-параметр на вашу страницу, вы можете получить любой параметр и загрузить данные соответствующим образом. Когда вы наносите ответный удар, он получает предыдущее значение параметра, и вы загружаете, как и раньше, кэшируя, где это возможно. Это своего рода упрощенное, не совсем верное объяснение, но достаточно близкое для краткого обзора.