JSF Richfaces getElementById答案

【问题标题】：JSF richfaces getElementByIdJSF Richfaces getElementById
【发布时间】：2012-04-13 07:57:15
【问题描述】：

我正在使用 jsf2 和richfaces 4.X 我如何才能获得启用了richfaces 的输入字段的当前值？等于 getElementById('field_name').vlue

我尝试了一些名为 findcomponent.value 和 element.value 的方法，但它们给了我旧值，即页面加载时 b/c findcomponent 和 element 方法返回服务器端 UI.components 而不是客户端组件？

【问题讨论】：

标签： jsf richfaces

【解决方案1】：

我猜您将使用rich:clientId 函数将正确的标识符呈现到您的Java 脚本中。

例如：

var myElement = document.getElementById("#{rich:clientId('field_name')}");

另见RichFaces rich:clientId within facelets

【讨论】：

【解决方案2】：

如果您检查生成的 HTML，您会看到每个 JSF / RF 元素都有他的 id，例如：。例如：

<h:form id="frmSample">
    <h:inputText id="txtSample" value="#{mybean.someTextValue}" />
</h:form>

生成的 HTML 将是：

<form method="POST">
    <input type="text" id="frmSample:txtSample" />
</form>

因此，在 JavaScript 中，您可以通过此 id 引用元素。

var txtValue = document.getElementById('frmSample:txtSample').value;

此外，对于 rich:tab 或 rich:calendar 等 RF 复合 HTML 组件，您可以使用 HTML 生成的组件 ID，但我会推荐 "#{rich:clientId('field_name')}"，正如 @DRCB 在他的帖子中所解释的那样。

【讨论】：

【解决方案3】：

要获取richfaces 组件的值，请使用rich:component 和getValue() 方法。
要获取 jsf 库组件值，请使用 rich:element 和 value JS 方法。

示例：

<h:form>
     <h:inputText id="textField" value="#{bean.value1}" />
     <a4j:commandButton value="displayTextField" action="doSomething()"
       onclick="alert('v:'+ #{rich:element('textField')}.value); return true;" />

     <rich:inplaceInput id="richField" value="#{bean.value1}" />
     <a4j:commandButton value="displayRichField" action="doSomething()"
       onclick="alert('v:'+ #{rich:component('richField')}.getValue()); return true;" />
</h:form>

它们甚至都可以在 Rich:dataTable 中工作，而无需添加数据表的 id 或其他内容。 Richfaces 非常聪明，可以找到“当前行”的 id 例子：

<h:form>
     <rich:dataTable id="mydatatable" value="bean.findValues()" var="myvar">

         <rich:column>

              <h:inputText id="textField" value="#{myvar.text1}" />
              <a4j:commandButton value="displayTextField" action="doSomething()"
                   onclick="alert('v:'+ #{rich:element('textField')}.value); return true;" />
         </rich:column>

         <rich:column>

             <rich:inplaceInput id="richField" value="#{myvar.text2}" />
             <a4j:commandButton value="displayRichField" action="doSomething()"
                  onclick="alert('v:'+ #{rich:component('richField')}.getValue()); return true;" />
         </rich:column>

     </rich:dataTable>
</h:form>

【讨论】：