JSF Ajax 问题答案

【问题标题】：JSF Ajax questionJSF Ajax 问题
【发布时间】：2011-06-17 07:21:06
【问题描述】：

首先，我想原谅我的最后一个问题。不知道这里的系统是如何工作的:-)

我有一个关于 JSF 和 Ajax 的问题。我的网络应用程序是动态的。整个页面在开始时只加载一次。当用户浏览菜单时，只有中心表会改变它的输出。

我有一些组件，比如 primeface 的数据表，或者只是在我的 bean 中执行功能的简单按钮。我的 web 应用程序连接到后端服务器，信息在 JSF 和后端之间共享，然后将显示给用户。

当用户点击时，例如在“搜索”按钮功能上，结果应显示在我的数据表中。将执行方法 {#searchBean.doSearch}。一条带有用户信息的消息被发送到后端。几秒钟后，JSF 收到这些信息。这是我的原则。

现在我想手动渲染数据表并告诉他“已收到所有搜索结果。请更新结果” 是否可以通过 JSF 手动渲染组件？或者有没有其他解决方案。

还有我的第二个问题。当消息发送到后端时，可能需要几秒钟才能收到结果，向用户显示“等待”消息（带有对话框）的最佳方式是什么？当我从后端收到结果时，我想手动更新我的组件，以便显示收到的信息，然后我需要一种方法来删除这个“等待”对话框。

我希望.. 你明白我想要什么，因为我的英语不是最好的 :-) 我不知道如何开始解决我的问题......我想我只需要一种通过 JSF 更新 HTML 元素并手动渲染组件的方法。但我没有在互联网上找到任何东西。也许我找错了东西？

问候，强尼

【问题讨论】：

标签： javascript ajax jsf components

【解决方案1】：

由于您使用的是 Primefaces（考虑到 2.0 之前的 jsf 构建），您可以使用一种更具体的方式来处理 Ajax（比 BalusC 描述的方式）。

您会注意到大多数组件都有一个名为“更新”的属性。您使用此属性来告诉 JSF 在发生某些事情后应该更新哪些组件。例如，如果您有一个按钮标记为：

<p:commandButton value='test' action='#{bean.search}' update='panelContainingDatatable' />

在执行 bean.search() 方法后，它总是会刷新客户端 ID 为 'panelContainingDatatable' 的组件。

另外，如果您想通知您的用户有关 ajax 请求待处理，请使用 p:ajaxStatus (http://www.primefaces.org/showcase/ui/pprAjaxStatus.jsf)

小心，有一些警告：

我们在这里讨论的是客户端 ID，而不是组件 ID（最好在页面源代码中查找）
将 ajax 与 ui:repeat 和 h:dataTable 混合使用时会出现边缘情况；坦率地说，最好尽量避免这种情况，而不是解决它们。它们来自实现中的错误以及关于 ui:repeat 的次优设计决策。

【讨论】：

谢谢你们！我现在要试试这些方法。
啊，我忽略/忘记了他正在使用 PrimeFaces。实际上，<p:commandButton update="foo" /> 基本上可以替代<h:commandButton><f:ajax execute="@form" render="foo" /></h:commandButton>。

【解决方案2】：

您可以为此使用<f:ajax>。它有一个render 属性，该属性应指向您要重新渲染的组件的（相对或绝对）客户端 ID。以: 开头的意思是绝对的（就像它在生成的HTML 中一样），否则它是相对于当前的naming container（就像<h:form>）。

这是一个简单的基本示例：

<h:form>
    <h:inputText value="#{bean.query}" />
    <h:commandButton value="Search" action="#{bean.search}">
        <f:ajax execute="@form" render=":results" />
    </h:commandButton>
</h:form>

<h:panelGroup id="results">
    <h:dataTable value="#{bean.results}" var="result" rendered="#{not empty bean.results}">
        <h:column>#{result}</h:column>
    </h:dataTable>
</h:panelGroup>

Bean 如下所示：

@ManagedBean
@ViewScoped
public class Bean implements Serializable {

    private String query;
    private List<Result> results;

    public void search() {
        results = resultDAO.list(query);
    }

    // ...
}

【讨论】：

谢谢你们！我现在要试试这些方法。