[Visualforce][jQuery]ID指定で要素を選択する

Visualforceでの開発にて、jQueryで要素を IDで指定したいのになかなかうまく取得できなくて苦しみました。

いやだいぶハマりましたが以下にて解決

フルパスの指定は出来なかった

状況を簡単に

・ボタンにJavaScriptコードを設定したい。
・jQueryで要素を取得したいが取れない。

このサイトを参考にしました。しましたがうまくいかなかった部分を補間といった感じです。

[Visualforce]jQueryから簡単にVisualforceコンポーネントを操作しよう

Visualforceの[apex:inputField]みたいなタグのid要素を、jQueryコード(onclickとか)のトリガーに使用したい場合、「{!$Component」から始まるフルパスで指定しないといけないのですが、フルパスで指定すると、実際に動くように中で変換された時に

{!$Component.form.button}

が

form:button

のようになっているらしい。

ピリオド区切りのつもりがコロンに変わってる。。

そしてjQueryの中では、(よくわからないけど)コロンは特殊な意味を持つ記号らしく、これが入っているとVisualforceの要素として検知してくれないらしい。

というわけで諦めかけたんですが、どうやらパスの後方一致検索ができるという事を知りました。

$(“#” + {!$Component.form.button}).on(“click”, function(){ … }

はダメでしたが、

$(“[id$=button]”).on(“click”, function(){ … }

はいけました!

サンプルの中にある「$.escapeSelector」がホントならこの辺を助けてくれるのかも知れませんが、私の使っているバージョンでは使えなかったのも原因です。

なお、後方一致でIDを取る場合、idはページの中で一意でないといけないのでそこはご注意ください。

では!