Javascriptがidを呼び出すことでJSFコンポーネントにアクセスできない

Question

次のコードを試して、そのIDを参照してJavascriptでJSFコンポーネントにアクセスしています。しかしこれは失敗する。

JSFコンポーネント：

<p:commandLink onclick="calculatePosition(this.id)" > 
     <h:graphicImage url="2.png"/> 
</p:commandLink> 

Javascriptコード：これにより、JS関数は&正しいIDが渡されたと呼ばれるが、それが失敗していることを証明する要素の正しいIDをそういえばすっかり忘れ

<script type="text/javascript"> 
    function calculatePosition(idOfClicked){ 
     alert(idOfClicked); 
     var $element = jQuery('#'+idOfClicked); 
     var offset = $element.offset(); 
     alert(offset.top); 
    } 
</script> 

第一のアラート作品2番目のアラートを表示します。これは、JSFコンポーネントのIDがこのJavaScript関数に渡され、非JSFコンポーネントで正常に動作する場合にのみ発生します。

どうすれば正しく動作させることができますか？

Answer 1

JSFは、生成されたクライアントIDに親のNamingContainerなどのID（たとえば、<h:form>）をデフォルトのセパレータ文字として:の前に付加します。だから、例えば

<h:form id="foo"> 
    <p:commandButton id="bar" /> 
    ... 

は

<form id="foo" name="foo"> 
    <input type="submit" id="foo:bar" name="foo:bar" /> 

として生成されるHTMLに終わる（ウェブブラウザで右クリックページとそれを自分で見るためにソースの表示]を選択）します

:でしかし、違法ですCSS識別子。これは、JSF側のアクセスできないパラメータとコンポーネントにしかならないコンポーネントIDでエンドユーザが誤って使用することがないように選択されました。 jQueryのCSSセレクタを使用してID内の:の要素を選択するには、バックスラッシュでエスケープするか、[id=...]属性セレクタを使用する必要があります。

var $element1 = jQuery('#' + id.replace(':', '\\:')); 
// or 
var $element2 = jQuery('[id="' + id + '"]'); 

また、JSF 2.0以来、あなたは、このような-など異なるが、CSS-有効な値でweb.xmlにjavax.faces.SEPARATOR_CHARコンテキストパラメータによってIDの区切り文字を上書きすることができます。ただし、JSFコンポーネントIDでこの文字を使用しないように注意する必要があります。

全く別の方法として、HTML DOM要素全体を渡すこともできます。

<p:commandButton onclick="calculatePosition(this)" /> 

あなたがIDをいじることなく、

function calculatePosition(element) { 
    var $element = jQuery(element); 
    // ... 
} 

を行うことができますように。