いつかのDatePicker(でハマった話)
今日も今日とて煉獄の炎に焼かれております。煉獄乙女です。(相変わらずダサい)
いつかのメリークリスマスっていい曲ですよね。
今回は一年目の初現場入り直後にDateTimePickerでハマった話です。
そもそもの話
HTML･CSSはかろうじて触ったことがあるものの、
JSPもJavaScriptもJQueryも触ったことがない私。
初めて割り振ってもらった仕事が管理画面への機能追加でした。
（JavaもJSPもJavaScriptもJQueryも全部触らないといけなかった訳ですね！）
初めてハマったのはもちろん環境設定なんですが、
ここでも大いにハマりました。ええ。
で、その際に上司から依頼された内容が、
DBのデータを取り出し、フォームに表示している部分をクリックして日付の変更を行う際に、
JQueryのDatePickerを使用してカレンダーを出してそこから日時を選択できるようにする。
というものでした。
わからないところがわからない（あるある）
そこで、onClickイベントから現在日時を取って、
その現在日時を表示させる動きを記載したんですが、
検索結果の上から３行だけ一度目のクリックではカレンダーが表示されない
という問題が発生。
１度クリックした後に、もう一度クリックするとカレンダーが表示されるんですが、
ページを表示した時点では、４行目からでないと１度目ではカレンダーが表示されませんでした。
で、これの原因がわからずに大ハマリ。
Firefoxでは普通に表示されて、
IE、WinのChrome（Macなら動く）のみで上３行が表示されないもんだから、
って感じで見当違いなままリファレンスをｇｇ…探す（そして見つからない）
解決への道のり
JQueryやJSPとはそれまでにも喧嘩しっぱなしでした。
Redmineに「こちらは仲良くしようと思っているのにJSP側が歩み寄りを見せない」と書いて上司に笑われた事がある
で、以前何かの際にイニシャライズのタイミングでエラっていたことがあり、
またお前はイニシャライズのタイミングで私を苦しめるのか？！
と思いながら
「DatePicker イニシャライズ」
で検索したらビンゴでした。やったぜ。（ここに辿り着くのにめちゃめちゃかかった）
ワンクリックでDatePickerを起動するには?(jquery)(1819)｜teratail
こいつ一回呼んだだけじゃイニシャライズしかされないんですね………（白目）
じゃあなんで４行目からは１クリックで表示されんだよ！！！！！（キレ芸）
リンク先のようにshowしてあげたら動きました。先人よ。。ありがとう。。。。
私もOnclickで動くかなって書いたよ…わかる…（エア握手）
まとめ
○事象
⇒フォームクリックでカレンダーを表示させる際、
JQueryUIのDatePickerをonClickで表示させると、
画面上から４行目以降は１回のクリックでカレンダーが表示されるが、
上から３行は２度クリックしないとカレンダーが表示されない。
○原因
⇒検索ボタン押下時にDBを検索し、結果データを動的に
リスト表示させている部分だったため。
DatePickerは１度の呼び出しではイニシャライズしかされないため、
１度目のクリック →イニシャライズ
２度目以降のクリック→通常のDatePickerの動き
となっていた。(４行目以降が１回目のクリックで動作した原因は不明…)
○対処
⇒DatePicker呼び出し時、showメソッドを明示的に追加することでバグ解消。
○例
⇒DatePickerのサンプル(指定するIDが静的であればこれでOK。
最初に書いて動かないよ～～！と泣きべそかいてたのもこんな感じでした。)
// HTML
<input type="text" id="dateform">
// JavaScript
$(function() {
$("#dateform").datepicker({
format: 'yyyy/mm/dd'
});
});
⇒動的に追加したものをクリックした時に一回目から動かしたいとき
// JavaScript
('body').on('click','#dateform',function(){
$(this).datepicker(
{
format: "yyyy/mm/dd"
});
// ここにshowメソッドを追加
$(this).datepicker("show");
})
余談
このバグが直った際、以前対処法をブログにメモっていたのですが、
「今なら私七夕の短冊に
「世間のどこかの人がDatePickerでハマりかけた時にすぐこのリファレンスが見つかりますように……」
って書けるわ。マジで。」
とメモされていました。ウケる。
この先こんな簡単に解消されるバグばかりではないとも知らずに。。。
ちなみにもう二年以上前のことなのでソースの書き方は違った気がします。
(htmlの中でonclickから関数呼んでた気がする)
それではまた。
