h:inputText 不是在 h:selectOneMenu 更改时进行 ajax 渲染答案

【问题标题】：h:inputText is not ajax-rendered on change of h:selectOneMenuh:inputText 不是在 h:selectOneMenu 更改时进行 ajax 渲染
【发布时间】：2012-09-20 14:43:09
【问题描述】：

我有这段代码用于选择在 jsf 表中显示多少行：

<!-- Set rows per page -->
<h:outputLabel for="rowsPerPage" value="Rows per page" />
<h:inputText id="rowsPerPage" value="#{AccountsController.rowsPerPage}" size="3" maxlength="3" />
<h:commandButton styleClass="bimage" value="Set" action="#{AccountsController.pageFirst}" >
    <f:ajax render="@form" execute="@form"></f:ajax>
</h:commandButton>&nbsp;
<h:message for="rowsPerPage" errorStyle="color: red;" />

我想以这种方式编辑代码：我想用 h:selectOneManu 替换代码并选择插入自定义值并支持 AJAX：

<h:selectOneMenu id="setrows" value="#{AccountsController.rowsPerPage}" converter="javax.faces.Integer" maxlength="3">                                    
    <f:selectItem itemValue="10" itemLabel="10" />
    <f:selectItem itemValue="50" itemLabel="50" />
    <f:selectItem itemValue="100" itemLabel="100" />
    <f:selectItem itemValue="500" itemLabel="500" />                                    
    <f:selectItem itemValue="332" itemLabel="Custom" />
    <f:ajax render="customrowperpage" />
</h:selectOneMenu>&nbsp;
<h:inputText id="customrowperpage" value="#{AccountsController.rowsPerPage}" rendered="#{AccountsController.rowsPerPage == '332'}" required="true" />

但由于某种原因，代码无法正常工作。你能帮我找出问题所在吗。当我从 h:selectOneMenu 列表 AJAX 调用中选择数字以更新表单时，我还想更新 AJAX 功能。

【问题讨论】：

如果您的组件将rendered 属性设置为false，则以后无法更新。您应该将 <h:inputText id="customrowperpage"> 包装在另一个 UI 组件中（例如 <h:panelGrid>）并重新渲染容器。
我测试了你的建议 - 它不起作用。我会让它更简单。如何重写源代码，以便当我从 h:selectOnemenu AJAX 调用中选择行时更新行数？

标签： ajax jsf jsf-2

【解决方案1】：

有两个问题。

首先，由于 JavaScript 在客户端运行，您不能对未呈现到客户端的 JSF 组件进行 ajax 更新。那么在 HTML DOM 树中就没有 JavaScript 可以选择、操作和替换的内容了。您应该改为 ajax 更新一个 JSF 组件，该组件总是呈现给客户端。

<h:panelGroup id="customrowperpage">
    <h:inputText value="#{AccountsController.rowsPerPage}" required="true" 
        rendered="#{AccountsController.rowsPerPage == '332'}" />
</h:panelGroup>

另见Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?

第二，Integer 从不 equals String。你在rendered 属性测试Integer rowsPerPage 对String '332'。删除那些单引号，使其成为一个完整的数字。

<h:panelGroup id="customrowperpage">
    <h:inputText value="#{AccountsController.rowsPerPage}" required="true" 
        rendered="#{AccountsController.rowsPerPage == 332}" />
</h:panelGroup>

【讨论】：

我更新了现在可以使用的代码。谢谢！我可以再问你一件事：当我从h:selectOneMenu 中选择数字时，我想更新表格行。使用原始代码如何更新代码？
只需在<f:ajax render> 中设置/添加其客户端ID。如有必要，您可以通过 <f:ajax listener> 预先执行 bean 方法。
嗨 BalusC，我正在使用相同的形式分配给两个输入文本框，并且它们都具有绑定到 getter 布尔方法的禁用属性。我只在 IE 9 中注意到这种行为，但在 IE8 和最新版本的 FireFox、Chrome 和 Safari 等其他浏览器上也可以使用。你能帮我找出问题吗？
我在 IE9 中注意到我在的更高级别 id 上呈现（对于 selectOneMenu）并且它可以工作，但不适用于两个 inputText 框 id。