ブラウザバック時にFORM送信された値が保持されない
概要
取り扱っているシステムでブラウザバック時にFORM送信された値が保持されない箇所があったので原因を調査した。
状況
選択肢1と選択肢2が存在し以下の流れでブラウザバックをする。
- 選択肢1の値はサーバサイドで作られる
- 選択肢1の選択に追従して選択肢2の値をXHR(Ajax等)で取得して変更する(初期表示の際は選択肢1の値を元にXHRでデータ取得をする)
- 選択肢2を選択する
- ブラウザバック
そうすると選択肢1ではFORMで送信した値が保持されるが、選択肢2では値が保持されない。 気づく人はこの時点でオチがわかるかもしれないが原因は以下。
原因
ブラウザバック時に選択肢1と選択肢2で選択した値が、前画面の選択肢1と選択肢2にセットされる。 選択肢1のデータはサーバサイドで作られるため、view上には選択肢1の収まるデータが存在するためブラウザバックしても値は保持される。 この際、選択肢2のデータリストは選択肢1の値をもとにXHRで取得されるため、選択肢2の初期のデータリストは空っぽである。初期状態の選択肢2のデータリストが空のため、ブラウザバック時に選択肢2が収まる場所がないため、選択肢2の値が消滅してしまう。
対策
- 選択肢2に入りうる値をサーバサイド側でviewに詰め込む
- 選択肢2の変更に追従するhiddenタグを用意する。選択肢2の値が変更されたらhiddenの値を利用して初期状態をセットしてあげる
