人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ショッピングサイトで商品詳細ページでカートに商品をカートに追加ボタンを作っています。

ボタンクリックの動作仕様は、クリックしたらその該当商品をカートにいれるapiをajaxでたたきます。
ページはカートには遷移せず、カートに商品が追加されているといった形です。
またこの時、ページ内のDOM要素に、現在のカートの一覧があるのですが、
その一覧に該当商品をjqueryでappendしています。

ここまでの処理はOKです。

この前提において、問題は以下のシナリオで発生しています。

商品検索結果から商品詳細へ遷移します。商品詳細で、商品をカートに追加します。
(繰り替えしになりますが、カートに商品が追加され、ページ内のDOMが更新されます。)
その後、改めて、カートの中身を確認しようとカート一覧画面へ遷移し、
確認後、ブラウザ戻るをすると、DOMで更新した内容が表示されません。

続きは補足に記載します。

●質問者: 匿名質問者
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から

補足)jquery hash changeというプラグインを追加しまして、戻るときに、
DOMを更新をする処理をするように設定して解決したのかと思いきや弊害で
商品検索結果から商品詳細へきて、商品をカートに追加ボタンクリックして戻るを
クリックすると、#がきいているので、#が無い商品詳細ページ、そしてもう一度
戻るをクリックして、商品検索結果に戻れますが、2度戻るは嫌で、1度ですませたいです。

この仕様を満たすにはどうしたら良いのか困っています。
pjaxもみましたが、サポートブラウザが少ないので、history.jsが良いかなと感じました。
history.jsがまだよくわかっておらずなのですが、history.jsのHistory.replaceState()
を使えばうまくいくのかな?とかも考えていますが、実現可能になるでしょうか。
もし、そうでしたら、プログラム例か、方針例をおしえてください。
何卒よろしくお願い致します。


1 ● 匿名回答1号
ベストアンサー

>確認後、ブラウザ戻るをすると、DOMで更新した内容が表示されません。

この時点での対処になりますけど
「ブラウザ戻るをすると、DOMで更新した内容が表示されない」部分全体が,
ページのロード時にAjaxで読み込まれるようにすればいいんですよ。

そうすれば,戻るボタンで画面に戻ってきた時にも再度Ajaxで最新情報が読み込まれますから。

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ