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>

第一个警报显示元素的正确 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 + '"]');

或者，从 JSF 2.0 开始，您可以使用 javax.faces.SEPARATOR_CHAR 覆盖 ID 分隔符。 web.xml 中的上下文参数使用不同但 CSS 有效的值，例如 - .但是，您需要注意不要自己在任何 JSF 组件 ID 中使用此字符。

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

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

这样你就可以做

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

无需摆弄 ID。