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函数被调用＆amp;已传递正确的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" />

（右键单击webbrowser中的页面，然后选择“查看源”以自行查看）

:在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中的web.xml上下文参数覆盖ID分隔符，并使用不同但CSS有效的值，例如-。但是，您需要注意不要在任何JSF组件ID中使用此角色。

作为一个完全不同的替代方案，您也可以只传递整个HTML DOM元素。

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

这样你就可以了

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

没有摆弄身份证。

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

1 个答案: