jQuery経由でJSF IDを取得する方法
簡単なJSFの例を参照してください。
<h:form id="signup-form"> <h:inputText id="email" value="#{beanBean.email}"/> </h:form>
次のHTMLコードを生成します:
<input id="signup-form:email" type="text"/>
jQueryセレクタを使用して電子メールIDを取得しますが、失敗しました。
<script> jQuery(document).ready(function($) { $('#signup-form:email').checkEmailFormat(); }); </script>
解決策
これは、JSFとjQueryを統合するためのよく知られた問題です。コロン「:」はjQueryセレクタ用に予約されています。 jQueryのseletorを使用してJSF IDを取得するには、コロンの前に2つのバックスラッシュを置いてコロンを「エスケープしてください」。
<script> jQuery(document).ready(function($) { $('#signup-form\\:email').checkEmailFormat(); }); </script>
PrimeFacesの場合
PrimeFacesには、JSF IDをエスケープする関数が付属しています。
<script> jQuery(document).ready(function($) { $(PrimeFaces.escapeClientId('signup-form:emil')).checkEmailFormat(); }); </script>
この
PrimeFaces.escapeClientId`関数は
primefaces.js`からのもので、ソースコードを見直してください。これは単にコロン “:”を置き換えるラッパーjs関数で、その前に二重バックスラッシュを置きます。
primefaces.js
escapeClientId:function(a){return"#"+a.replace(/:/g,"\\:")}
P.S PrimeFaces 3.3
でテスト済み
参考文献
-
http://docs.jquery.com/Frequently
Asked
Questions#How
do
I
select
an
element
by
an
ID
that
has
characters
used
in
CSS__notation.3F[Howow
CSSで使用されている文字を持つIDで要素を選択する
表記法?]。
http://www.tequilafish.com/2007/12/04/jquery-how-to-get-the-id-of-your-current-object/
[jQuery
jQuery]。
jQuery、JSF id、PrimeFaces