いつかのDatePicker(でハマった話) - こんなソースに誰がした

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

そもそもの話

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から関数呼んでた気がする)

それではまた。