XPageのID指定は難しい？？？

今回はXPageでjQueryを使う場合にはまりやすいポイントを解説します。jQueryを個別の要素(フィールドや個別のタグ)を指定するにはIDタグを使用します。例えばテキストフィールドの文字色を変えたい場合にはこんな感じになります。

$("#Subject").css("color","pink");

さて、XPageのID指定ってどこでしょう？XPageでは「名前」がIDとして指定されます。

このコントロールの「名前」はすべてのプロパティ-IDに反映されます。(「名前」項目はこのidをわかりやすく表示しているだけなので、どちらから変更しても同じです)

今動かなきゃ何にもならないんだ！！！

では、先ほどのjQueryのソースをボタンのクリックイベントに書き込んで、実行してみましょう！

全く動きません！Why？

ブラウザの開発者ツールを使ってフィールドのIDを調べてみましょう。idであるSubjectの前に変な文字が付加されて”view:_id1:Subject”となっています。

じゃぁ、このidを指定すればいいんじゃね？ということで下記のように書き換えて実行してみます。

$("#view:_id1:Subject").css("color","pink");

動きません！なんでやねん！

XPageとjQueryのシンクロ率を下げているもの

ここでポイントとなるのはid名”view:_id1:Subject”の中に入っているコロン”:”です。このコロンがCSSの疑似クラスで使われている区切り記号と判断され、正常に要素を選択することができなくなってしまっています。

これを回避するにはコロンの前にバックスラッシュ(\マーク)を二つ重ねてエスケープします。

$("#view\\:_id1\\:Subject").css("color","pink");

動くようになりました。

次回予告

次回「XPages with jQuery なぜID指定でjQuery!が動かないのか? Part2」ではXPagesの標準的なID指定と書かれている{id:要素名}を使った場合の方法を書いていきます。