Javascript无法通过id调用JSF组件来访问该组件

Question

我正在尝试以下代码，通过引用其Id来访问Javascript中的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>

1st alert的工作原理是丢弃元素的正确id，从而证明JS函数被调用&已传递正确的id，但无法显示第二个警报。只有当JSF组件的id被传递给这个JavaScript函数，但与非JSF组件配合良好时，才会发生这种情况。

如何使其正确工作？

Answer 1

JSF在生成的客户端id中预先准备父NamingContainer组件(如<h:form>(的id，:作为默认分隔符。例如

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

将以的形式出现在生成的HTML中

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

(右键单击Web浏览器中的页面，然后选择"查看源代码"亲自查看(

然而，:在CSS标识符中是非法的。这样做是为了让最终用户不会意外地在组件ID中使用它，这只会导致JSF端的参数和组件不可访问。要使用jQuery中的CSS选择器选择ID中具有:的元素，您需要通过反斜杠对其进行转义，或者使用[id=...]属性选择器。

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

或者，由于JSF2.0，您可以在web.xml中使用不同但CSS有效的值(如-(通过javax.faces.SEPARATOR_CHAR上下文参数覆盖ID分隔符。但是，您需要小心，不要在任何JSF组件ID中自己使用这个字符。

作为一种完全不同的选择，您也可以只传递整个HTMLDOM元素本身。

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

这样你就可以进行

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

而不会篡改身份证。