某有名jQuery Plugin、DataTablesにて、入力フォームを作ったのですが、お客様から「フィルタしたまま確定すると、フィルタされた情報が送信されない」とのお叱りをいただいてしまいました・・・。
原因はDataTablesの仕様を理解してなかったことで、フィルタ中、display: none的な非表示になってるだけかと思いきや、要素ごと消えちゃうんですね。これでポストしても情報は送れないのはしょうがない。
今回とった対応は、「画面遷移前にフィルタをクリアしちゃえばいいじゃないか」というもの。今回のシステムでは、DataTablesを呼び出す部分はライブラリ化してあり、フィルタ使ってる部分は全部、そのライブラリ経由になってる。では、このライブラリだけで済むような修正方法を、ということで、画面遷移時に発生するイベントにリスナーを登録する処理をライブラリに埋め込むことにしました。
ようやっと本題です。では、どのイベントに登録すればよいか？結論は「submit」です。
例えば、function hogehoge()ってリスナーを登録するのであれば、
// falseはuseCapture。falseで利用しない。
window.addEventListener("submit", hogehoge, false);
になります。
「そりゃ、ポスト前なんだからsubmitに決まってるじゃん」と言われればそうなんですが、、、（個人的に）似たようなイベントとして「beforeunload」というイベントがあるんですね。これは、画面遷移前に発火するイベントで、今回は「画面遷移前に」という発想から入っちゃったので、最初、こっちを試したんです。ところが、このbeforeunload、どうやらsubmitより後に呼ばれるみたいで。このタイミングでDataTablesのフィルタをクリアしてもポストされない、なんだこりゃ？と思った次第です。
画面遷移前にこちょこちょJavaScript動かすことはよくある要件かと思いますが、イベントの種類に注意！という投稿でしたー