JSF richfaces getElementById

Question

我使用的是jsf2和richfaces 4.X，如何获取启用了richfaces的输入字段的当前值？等于getElementById('field_name').vlue

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

Answer 1

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

例如：

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

另请参阅RichFaces rich:clientId within facelets

Answer 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复合超文本标记语言组件，你可以使用由超文本标记语言生成的组件ID，但我推荐使用"#{rich:clientId('field_name')}"，正如@DRCB在他的文章中所解释的那样。

Answer 3

要获得rich values组件值，请使用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中，它们也可以工作，而不需要添加datatable的id或其他东西。Richfaces非常聪明，它可以找到“当前行”示例的ids：

<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>