使用 JSF 和 AJAX 渲染隐藏元素答案

【问题标题】：Render hidden elements using JSF and AJAX使用 JSF 和 AJAX 渲染隐藏元素
【发布时间】：2015-06-12 11:54:32
【问题描述】：

我在每次提交表单时使用 JSF 和 AJAX 来呈现表格而无需重新加载整个页面时遇到了一些问题。

当我第一次运行服务器时，我的数据库是空的，所以页面应该只显示一个添加书籍的表单。当用户提交表单时，应该呈现所有书籍的fieldset。我不希望在数据库为空时显示此 fieldset。

这是我的代码的一个简单版本（它只是一个小表单和一个要使用 AJAX 刷新的表格）：

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">

<h:head />
<h:body>
<h:graphicImage library="img" name="caelum-logo.png"/>

<h:form>
    <p>Book Title:</p>
    <h:inputText id="title" value="#{livroBean.livro.titulo}" />
    <h:commandButton value="Add book" action="#{livroBean.addFirstBook}">
        <f:ajax execute="@form" render="title :addedBooksTable" />
    </h:commandButton>
</h:form>

<div id="addedBooksTable">
    <p:fieldset rendered="#{livroBean.numberOfBooks > 0}">
        <h:dataTable value="#{livroBean.allBooks}" var="book">
            <h:column>
                <h:outputText value="#{book.titulo}" />
            </h:column>
        </h:dataTable>
    </p:fieldset>
</div>

</h:body>
</html>

我想专注于这部分：

<h:commandButton value="Add book" action="#{livroBean.addFirstBook}">
    <f:ajax execute="@form" render="title :addedBooksTable" />
</h:commandButton>

当没有书籍添加到数据库时，字段集和其中的表应该是隐藏的，这就是我使用<p:fieldset rendered="#{livroBean.numberOfBooks > 0}"> 的原因。但我希望它在我点击commandButton 后呈现，即使inputText 没有任何内容。

这是我测试代码时发生的情况：

如果我像使用空数据库一样测试代码，当我单击commandButton 时，inputText 会被刷新（它会“擦除”提交前输入的内容），但字段集不会。我知道该字段集有一个rendered="#{livroBean.numberOfBooks > 0}" 而inputText 没有，但是每次我点击commandButton 时都会调用getNumberOfBooks 方法，这就是为什么我没有得到它...
如果我把f:ajax标签改成这样<f:ajax execute="@form" onevent="click" render="title :addedBooksTable" />，问题就解决了，但是当我点击commandButton时，我可以实现屏幕闪烁一会儿。据我所知，AJAX 的用途之一是我们不希望在发出请求时屏幕闪烁。

为什么fieldset 只在我使用onevent="click" 时才呈现？我应该认为闪烁是正常的吗？有没有更优雅的解决方案？

谢谢！

【问题讨论】：

标签： ajax jsf jsf-2.2

【解决方案1】：

您不能对普通的 HTML 元素进行 ajax 更新。您只能对 JSF 组件进行 ajax 更新。原因很简单，目标必须能够被UIViewRoot#findComponent() 解析，这样JSF 才能在组件树中找到它，并将更新后的HTML 渲染到Ajax 响应中。

替换

<div id="addedBooksTable">

通过

<h:panelGroup layout="block" id="addedBooksTable">

通常，这应该引发How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar" 中所述的异常，但他们在 Mojarra 2.2.5 中删除了此检查，以支持 ajax 更新 <ui:repeat> 和 <h:dataTable> 的特定迭代（此缺失检查稍后会修复，因为这对像你这样的初学者确实没有帮助）。

至于为什么添加 onevent="click" 似乎有效，那是因为它导致了 JavaScript 错误，进而导致整个 JavaScript/Ajax 崩溃，进而导致命令按钮回退到默认同步行为重新加载整页（好像您根本没有使用 <f:ajax>）。您可能打算改用event="click"。 onevent 属性有不同的用途。另见 a.o. Proccess onclick function after ajax call <f:ajax>.

【讨论】：