如何知道JSF组件的ID，以便可以在Javascript中使用

一尘不染

如何知道JSF组件的ID，以便可以在Javascript中使用

javascript

问题： 有时您可能想使用来从javascript访问组件
getElementById，但是id是在JSF中动态生成的，因此您需要一种获取对象id的方法。我在下面回答您如何做到这一点。

原始问题： 我想使用以下类似的代码。如何在Javascript中引用inputText JSF组件？

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <head>
       <title>Input Name Page</title>
        <script type="javascript" >
          function myFunc() {
            // how can I get the contents of the inputText component below          
            alert("Your email address is: " + document.getElementById("emailAddress").value);
          }
       </script>
    </head>
    <h:body>
        <f:view>
            <h:form>
                Please enter your email address:<br/>
                <h:inputText id="emailAddresses" value="#{emailAddresses.emailAddressesStr}"/>
                <h:commandButton onclick="myFunc()" action="results" value="Next"/>
            </h:form>
        </f:view>
    </h:body>
</html>

更新
：这篇文章在JSF2.0中的Client
Identifiers讨论了使用类似的技术：

<script type="javascript" >
  function myFunc() {
    alert("Your email address is: " + document.getElementById("#{myInptTxtId.clientId}").value);
  }
</script>

<h:inputText id="myInptTxtId" value="backingBean.emailAddress"/>
<h:commandButton onclick="myFunc()" action="results" value="Next"/>

在上述示例中，建议组件id上的属性inputText创建一个可以使用EL使用EL访问的对象#{myInptTxtId}。本文继续指出，JSF
2.0
getClientId()向UIComponent类添加了零参数方法。因此，允许#{myInptTxtId.clientId}上面建议的构造获取组件的实际生成的id。

虽然在我的测试中这不起作用。任何人都可以确认/拒绝。以下建议的答案具有以上技术没有的缺点。因此，最好知道上述技术是否真的有效。

阅读 393

2020-04-25

共1个答案

一尘不染

答：这是我最幸福的技术。不需要做太多
奇怪的事情来找出组件的ID。请记住，这样做的全部目的是让您可以id从页面上的任何位置了解组件的信息，而 不仅仅是
实际组件本身。这是关键。我按下一个按钮，启动javascript函数，它应该能够访问任何其他组件，而不仅仅是启动它的组件。

此解决方案不需要任何“右键单击”即可查看ID是什么。这种类型的解决方案很脆弱，因为ID是动态生成的，并且如果我更改页面，则每次都必须经过这些废话。

将组件绑定到支持bean。
随时随地引用绑定的组件。

因此，这里有一个示例。

假设：我有一个 .xhtml页面（可以是 .jsp），并且定义了一个支持bean。我也在使用JSF 2.0。

.xhtml页面

BackBean.java

UIInput emailAddyInputText;

确保也为此属性创建您的获取/设置器。

2020-04-25