XPageのID指定は{id:要素名}？？？

前回はXPageから出力されたidを使ってjQueryを動かしました。しかし、あのidってちょっと不安じゃないですか？法則がよくわからないし・・・。XPagesの情報を見るとJavaScriptでコントロールの要素を取得するには、{id:要素名}と書かれています。例えば素のJavaScriptでテキストコントロールの値を取得するにはこんな風に書きます。

var subject = document.getElementById("#{id:Subject}").value;
alert(subject);

これをjQueryで書き換えてみましょう。前回やったようにコロンはバックスラッシュ2つでエスケープするんでしたね。

var subject = $("#{id\\:Subject}").val();
alert(subject);

起動！

動きません。

#{id:要素名}はDominoが変換した後、出力される

通常のid指定と、#{id:要素名}形式で指定した場合のid指定は何が違うのでしょう？XPage上で指定された”#{id:Subject}”のid名はDominoサーバーに変換され、HTML上では”view:_id1:Subject”という形で出力されます。

先ほど見た通り、XPage上の#{id:要素名}にはバックスラッシュで:(コロン)をエスケープすることが出来ませんから、出力された後の”view:_id1:Subject”に対して、:(コロン)の前にバックスラッシュを入れる処理を行う必要があります。

:(コロン)を\\:(バックスラッシュ×2コロン)に変換する関数を作ろう

#{id:要素名}形式で記述する場合、Dominoサーバーが変換した結果に対して、バックスラッシュでエスケープを行う必要がありますから、変換用の関数を作ります。引数で渡されたid(Domino変換後)に、JavaScriptで:(コロン)の前にバックスラッシュを入れます。その後、id指定を表すための#を追加し、$()で囲むことでjQueryオブジェクトを取得します。関数名に$が付いていますが、JavaScriptでは$も関数名、変数名に使えます。x$の意味としてはx-XPagesを表し、$がjQueryを表しています。関数名は好きに変更して貰って良いと思います。

function x$(idTag){
	//正規表現を使って:を\\:に変換
	idTag = idTag.replace(/:/g,"\\:");
	//変換結果の先頭に#を付けid指定とし、$()で囲むことでjQueryオブジェクトを返す
	return($("#"+idTag));
};

完成

先ほど作った関数を使って、jQueryオブジェクトを取得した形で、最初に作った処理をjQueryで記述するとこのようになります。

var subject = x$("#{id:Subject}").val();
alert(subject);

動きました！！

次回予告

次回はjQueryの基本的なことについて書いていきます。