匿名質問者

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


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

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

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

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

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

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2014/01/09 23:35:48
匿名質問者

質問者から

匿名質問者2014/01/10 01:15:11

補足)jquery hash changeというプラグインを追加しまして、戻るときに、

  DOMを更新をする処理をするように設定して解決したのかと思いきや弊害で

  商品検索結果から商品詳細へきて、商品をカートに追加ボタンクリックして戻るを

  クリックすると、#がきいているので、#が無い商品詳細ページ、そしてもう一度

  戻るをクリックして、商品検索結果に戻れますが、2度戻るは嫌で、1度ですませたいです。

  

  この仕様を満たすにはどうしたら良いのか困っています。

  pjaxもみましたが、サポートブラウザが少ないので、history.jsが良いかなと感じました。

  history.jsがまだよくわかっておらずなのですが、history.jsのHistory.replaceState()

  を使えばうまくいくのかな?とかも考えていますが、実現可能になるでしょうか。

  もし、そうでしたら、プログラム例か、方針例をおしえてください。

  何卒よろしくお願い致します。

ベストアンサー

匿名回答1号 No.1

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

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

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

その他の回答0件)

匿名回答1号 No.1

ここでベストアンサー

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

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

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

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません