開発者ドキュメント

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

でテスト済み

参考文献


  1. jQueryセレクタ


  2. 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

モバイルバージョンを終了