ボタンクリックの動作仕様は、クリックしたらその該当商品をカートにいれるapiをajaxでたたきます。
ページはカートには遷移せず、カートに商品が追加されているといった形です。
またこの時、ページ内のDOM要素に、現在のカートの一覧があるのですが、
その一覧に該当商品をjqueryでappendしています。
ここまでの処理はOKです。
この前提において、問題は以下のシナリオで発生しています。
商品検索結果から商品詳細へ遷移します。商品詳細で、商品をカートに追加します。
(繰り替えしになりますが、カートに商品が追加され、ページ内のDOMが更新されます。)
その後、改めて、カートの中身を確認しようとカート一覧画面へ遷移し、
確認後、ブラウザ戻るをすると、DOMで更新した内容が表示されません。
続きは補足に記載します。
補足)jquery hash changeというプラグインを追加しまして、戻るときに、
DOMを更新をする処理をするように設定して解決したのかと思いきや弊害で
商品検索結果から商品詳細へきて、商品をカートに追加ボタンクリックして戻るを
クリックすると、#がきいているので、#が無い商品詳細ページ、そしてもう一度
戻るをクリックして、商品検索結果に戻れますが、2度戻るは嫌で、1度ですませたいです。
この仕様を満たすにはどうしたら良いのか困っています。
pjaxもみましたが、サポートブラウザが少ないので、history.jsが良いかなと感じました。
history.jsがまだよくわかっておらずなのですが、history.jsのHistory.replaceState()
を使えばうまくいくのかな?とかも考えていますが、実現可能になるでしょうか。
もし、そうでしたら、プログラム例か、方針例をおしえてください。
何卒よろしくお願い致します。
>確認後、ブラウザ戻るをすると、DOMで更新した内容が表示されません。
この時点での対処になりますけど
「ブラウザ戻るをすると、DOMで更新した内容が表示されない」部分全体が,
ページのロード時にAjaxで読み込まれるようにすればいいんですよ。
そうすれば,戻るボタンで画面に戻ってきた時にも再度Ajaxで最新情報が読み込まれますから。
>確認後、ブラウザ戻るをすると、DOMで更新した内容が表示されません。
この時点での対処になりますけど
「ブラウザ戻るをすると、DOMで更新した内容が表示されない」部分全体が,
ページのロード時にAjaxで読み込まれるようにすればいいんですよ。
そうすれば,戻るボタンで画面に戻ってきた時にも再度Ajaxで最新情報が読み込まれますから。
コメント(0件)