如何通过 javascript getElementById 访问自定义 JSF 标签

Question

我有以下代码。

<h:form id="Form">
  <div class="pageBody">
    <h:outputLabel id="lbl" styleClass="formLabel" value="#{messages['lable.email']}:" />
    <s:button id="login" label="#{messages['login.button']}" actionBean="#{account}" actionMethod="login" />
  </div>
</h:form>

这里是javascript

var obj = document.getElementById("Form:lbl");  //This works
var obj1 = document.getElementById("Form:login"); //This doesnt work

请记住，<s:button> 是一个自定义 JSF 组件。

感谢任何帮助

Answer 1

它应该适用于自定义组件。它是自定义组件还是复合组件？您遇到的问题以及 JSF 2.0 标记的存在表明它实际上是componsite component。自定义标签、自定义组件和复合组件的区别，查看When to use <ui:include>, tag files, composite components and/or custom components?

在这个答案中，我假设它确实是一个复合组件。

首先，JavaScript 与 HTML DOM 树一起工作，而不是与 JSF 组件树一起工作。 JavaScript 即在网络浏览器上运行，而不是在网络服务器上运行。 JSF 在 webserver 上运行，生成一堆 HTML 并将其发送到 webbrowser。 document.getElementById() 只接受 HTML DOM 元素 ID。

所以，要找出 <s:button> 生成的 HTML DOM 元素 ID，您应该在 Web 浏览器中打开 JSF 页面，右键单击，然后 查看源代码 并找到生成的 HTML 元素在 HTML 源代码中。

如果您的<s:button id="login"> 复合组件又在实现中使用例如<h:commandButton id="button">，那么它看起来像这样：

<input type="submit" id="Form:login:button" />

一个复合组件本身，即NamingContainer 组件，它会像这样预先添加ID。 <h:form> 也是这样一个组件。这使您可以在同一个父容器内使用多个复合组件。

你应该在你的 JavaScript 函数中使用 那个 ID。

var button = document.getElementById("Form:login:button");