AJAXヘルパーのobserveField

先日はAJAXヘルパーのobserveFormを使って、フォーム内の任意の項目が更新されたタイミングで非同期な検索を行うことをやり、今回は、observeFieldを使ってフォーム内の特定のフィールドが更新されたタイミングで検索を行わせてみました。observFieldの使い方はobservFormと一緒で、フォームのidを指定していた第１引数をフィールドのidにするだけ。ラクチン。フィールドがhiddenでもOKなのね。

今回、observFiledを使うことになったのは、DragZoomControlからインスパイァーを受けるの続きの話で、マウスでGoogleMap上の範囲を指定させ、指定された始点/終点（長方形の対角の２点）を使って検索を行う機能。mousedown,mousemove,mouseupのイベントを使い範囲指定させるのは上手くいったので、mouseupの最後で始点/終点の座標をフォームに設定してsubmit。検索結果を画面に出したかった。
当初はJavaScriptでsubmitさせようとしたのだけど、検索の一部と結果表示を既存のobsevFormを使っている部分を共有したかったので、方式を統一する意味でもobservFiledを使う事にした。始点X,始点Y,終点X,終点yの順番でフォームに書き込んでいき、終点yをobservFiledで監視しておくと、マウスでの範囲選択終了を契機にして、検索が行われ結果表示までつなげていく。

observFormの使い方についてはhttp://puyo2.upper.jp/cake/のCakePHPのHelperを使う～Helperの使用法とかんたんAJAX～(pdf)を参考にしてください。