JSF ui:include 和 getElementById

【问题标题】：JSF ui:include and getElementByIdJSF ui:include 和 getElementById
【发布时间】：2012-08-17 06:32:42
【问题描述】：

我正在编写 ui:composition xhtml 文件以使用 ui:include 包含在不同的页面中。看起来我无法使用 getElementById 在此文件中引用来自 javascript 的标签，因为标签 id 可能会在父页面中的表单 id 前面。有解决办法吗？

【问题讨论】：

【解决方案1】：

如果您碰巧使用Apache's Tomahawk Components，并指定forceId="true"，标签ID 将保持不变。例如：

<t:inputText id="name" forceId="true" value="#{myBean.property}" />

将产生<input type="text" id="name" ... / >。

【讨论】：

【解决方案2】：

你可以这样做：

var elem = document.querySelector( '[id$="-test"]' );

其中test 是不带前缀的ID，- 是前缀分隔符。

上面的代码将选择“id”属性以"-test"结尾的元素（例如<div id="form1-test">...</div>）。

现场演示： http://jsfiddle.net/8kyb2/

注意querySelector() 与attribute-ends-with 选择器配对的执行速度比getElementById() 慢。

【讨论】：