skillup

技術ブログ

UI

検索ページの遷移に関して

投稿日:

検索ページの遷移に関してメモ。

基礎だが実際全部完全に網羅できているかというと不安な部分が多い。

基本仕様: 以下のようなページ構成を想定

  • 1ページ目は検索エリアと一覧が同時にでる
  • 一覧情報からはリンクで詳細画面に移動できる
  • ページャ―は1ページあたりいくつのリンク形式(インフィニティスクロールではない)

想定しないといけない遷移状態

  • 詳細ページから戻った時の検索状態の検索&ページャーの保存
  • 戻るのは戻るボタン&history.back
  • ページャーで1ページ目に移ったときに検索情報が保存されているか
  • パンや別リンクなどでうつったときにセッションやページャーがクリアされているか

よくある実装

  • 検索情報はGETで送り、セッションに保存する
  • 2ページ目以降はページ番号をGETで送り、検索情報はセッションで引き回す ※検索も含めてhiddenなどにいれて全てGETで回すということをすることもあり
  • 再検索された場合や、パンくずやリンクなどの場合、セッションを消す(ココが忘れやすいので注意)
  • リクエスト句(この場合GET)はセッションに常に優先する
  • 会員サイトなどだとPOSTで送信する分、historyback対策がやや大変。すべてsessionからデータを引っ張ってくる

特にhistoryback対策が大変です・・・

-UI
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

JSリンク集+git ブランチ指定 clone

現状の私の課題としてUIに対する意識が甘いということが上げられます。 大昔のサイトで使っているようなわかりにくいUIをそのまま使っているんですよね。 UIといってもいろいろな要素が必要となってきますが …

no image

ブラウザ上でのドラッグ&ドロップの処理

あるシステムから別のシステムにデータを移すとき、一般的にはCSVを使うことが多いかと思います。 今携わっているシステムもそうなのですが、CSVのどの項目を選ぶかを変更したいときってありますよね。 以前 …

no image

cakePHPのSSL設定+jQueryのError Loading Page

cakeで作ったアプリの認証画面でhttps環境だとError Loading Pageというエラーメッセージがでてしまい、ログインできないという事象が発生。 最初はSSLが原因かとおもっていたんです …

no image

Bootstrapまとめ 主に段組み関連の知識について

自分はデザインセンスが壊滅的なので、Bootstrapにいろいろと頼っております。 最初は仕事でちょこっと使う機会があり、見よう見まねでやっていましたが、理屈がわからないと応用がきかないこともあるため …

no image

AngularJS カスタムディレクティブ

AngularはHTMLの中にng-clickなどと書いておけばイベントを紐づけて、特定動作時にメソッドを呼び出すことができます。 これをオリジナルで自作することができます。 customer_dir …