Question

问题：有时您会想要通过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>

更新：这篇文章Client Identifiers in JSF2.0讨论了使用如下技术：

<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 创建一个可以使用#{myInptTxtId}使用EL访问的对象，在上面的例子中。文章继续说明JSF 2.0增加了 getClientId()类的零参数UIComponent方法。从而允许建议#{myInptTxtId.clientId}结构以上是获取组件的实际生成ID。

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

Answer 1

您需要准确使用JSF在生成的HTML输出中指定的ID。右键单击Web浏览器中的页面，然后选择查看源。这正是JS看到的HTML代码（你知道，JS在webbrowser中运行并拦截HTML DOM树）。

给出

<h:form>
    <h:inputText id="emailAddresses" ... />

它看起来像这样：

<form id="j_id0">
    <input type="text" id="j_id0:emailAddress" ... />

其中j_id0是生成的HTML <form>元素的生成ID。

您宁愿为所有JSF NamingContainer组件提供固定的id，以便JSF不会自动生成它们。 <h:form>就是其中之一。

<h:form id="formId">
    <h:inputText id="emailAddresses" value="#{emailAddresses.emailAddressesStr}"/>

这样，表单不会获得自动生成的ID，例如j_id0，输入字段将获得formId:emailAddress的固定ID。然后你可以在JS中引用它。

var input = document.getElementById('formId:emailAddress');

从那时起，您可以像往常一样继续使用JS代码。例如。通过input.value获得价值。

另见：

How to select JSF components using jQuery?

根据您的更新

更新：您误解了博客文章。特殊#{component}引用引用当前组件，其中EL表达式已经过评估，并且仅适用于组件本身的任何属性。无论你想要什么，也可以通过以下方式实现：

var input = document.getElementById('#{emailAddress.clientId}');

with（注意视图的binding，你应该absolutely not将它绑定到bean）

<h:inputText binding="#{emailAddress}" />

但那很难看。更好地使用以下方法，其中将生成的HTML DOM元素作为JavaScript this引用传递给函数

<h:inputText onclick="show(this)" />

与

function show(input) {
    alert(input.value);
}

如果你正在使用jQuery，你甚至可以通过使用样式类作为标记接口来抽象它们更进一步

<h:inputText styleClass="someMarkerClass" />

与

$(document).on("click", ".someMarkerClass", function() {
    var $input = $(this);
    alert($input.val());
});

Answer 2

答案：所以这是我最开心的技巧。不需要做太多非常奇怪的东西来弄清楚组件的id。请记住，重要的是，您可以从页面的任何位置了解组件的id，而不是实际组件本身的。这是关键。我按下按钮，启动javascript功能，它应该能够访问任何其他组件，而不仅仅是启动它的组件。

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

将组件绑定到辅助bean。
在任何地方引用绑定组件。

所以这里有一个如何做的样本。

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

*。xhtml页面

<script>
  function myFunc() {
    var inputText = document.getElementById("#{backBean.emailAddyInputText.clientId}")                 
    alert("The email address is: " + inputText.value );
  }
</script>

<h:inputText binding="#{backBean.emailAddyInputText}"/>
<h:commandButton onclick="myFunc()" action="results" value="Next"/>

BackBean.java

UIInput emailAddyInputText;

确保为此属性创建getter / setter。

Answer 3

Id是动态生成的，因此您应该为所有父元素定义名称，以避免类似j_id123的ID。

注意，如果你使用jQuery来选择元素 - 你应该在冒号之前使用双斜杠：

    jQuery("my-form-id\\:my-text-input-block\\:my-input-id")

而不是：

    jQuery("my-form-id:my-text-input-block:my-input-id")

如果是Richfaces，您可以在jsf页面上使用el表达式：

    #{rich:element('native-jsf-input-id')}

选择javascript元素，例如：

    #{rich:element('native-jsf-input-id')}.value = "Enter something here";

Answer 4

生成此源代码时，您可以查看HTML源代码并查看ID设置的内容，以便在JavaScript中使用它。因为它在一个表单中，它可能在表单id之前加上它。

Answer 5

我知道这不是JSF方式，但是如果你想避免ID痛苦，你可以为选择器设置一个特殊的CSS类。只要确保使用一个好的名称，这样当有人读取类名时，很明显它是用于此目的。

<h:inputText id="emailAddresses" class="emailAddressesForSelector"...

在您的JavaScript中：

jQuery('.emailAddressesForSelector');

当然，您仍然需要手动管理类名唯一性。我认为只要你不在可重用组件中使用它，这是可维护的。在这种情况下，您可以使用约定生成类名。

Answer 6

<h:form  id="myform">
 <h:inputText  id="name" value="#{beanClass.name}" 
                a:placeholder="Enter Client Title"> </h:inputText>
</h:form>

这是jsf的一个小示例。现在，我将编写JavaScript代码来获取上述jsf组件的值：

    var x = document.getElementById('myform:name').value; //here x will be of string type

   var y= parseInt(x,10); //here we converted x into Integer type and can do the 
                           //arithmetic operations as well

我怎么知道JSF组件的id，所以我可以在Javascript中使用

6 个答案:

另见：