Javascript無法通過ID調用來訪問JSF組件

Question

我試着通過引用其Id來訪問JSF組件中的以下代碼片段。但是這失敗了。

JSF組件：

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

Javascript代碼：

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

一號戒備工作dislaying元素由此可以證明，JS調用函數&正確的ID已經過去了，但它沒有正確的ID顯示第二個提醒。只有當JSF組件的id傳遞給這個JavaScript函數，但對於非JSF組件工作正常時纔會發生這種情況。

如何使其正常工作？

Answer 1

JSF在生成的客戶端ID中預先生成父節點NamingContainer組件的ID（例如<h:form>），默認分隔符爲:。因此，例如

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

將生成的HTML最終成爲

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

（在網頁瀏覽器右擊頁面並選擇查看源文件，看看它自己）

的:卻在非法CSS標識符。這樣做是爲了讓最終用戶不會意外地在組件ID中使用它，這隻會導致JSF方面的參數和組件不可訪問。要使用jQuery中的CSS選擇器在ID中選擇一個帶有:的元素，您需要使用反斜槓轉義它或使用[id=...]屬性選擇器。

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

或者，由於JSF 2.0可以用不同的，但CSS-有效值如-覆蓋由一個javax.faces.SEPARATOR_CHAR上下文參數的ID分隔符在web.xml。但是，您需要小心，不要在任何JSF組件ID中自己使用此字符。

作爲一個完全不同的選擇，您也可以傳遞整個HTML DOM元素本身。

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

，這樣就可以做

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

不使用標識擺弄。