如何通过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组件。对于自定义标签，自定义组件和组合组件之间的区别，请检查何时使用<ui：include>，标签文件，组合组件和/或自定义组件？

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

首先，JavaScript使用HTML DOM树，而不使用JSF组件树。JavaScript即在Web浏览器上运行，而不在Web服务器上运行。JSF在Web服务器上运行，生成一堆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");