如何使用 jQuery AJAX 将一个 JSF2 页面注入另一个页面

Question

我正在使用 jQuery 的 .load 函数将一个 JSF 页面加载到另一个页面中。

在加载的 JSF 页面使用一些 AJAX 功能之前，这非常有效。发生这种情况时，父 JSF 页面的 AJAX 将停止工作。事实上，在这两个页面合并之后，无论哪个页面具有其 AJAX 调用下一个都是继续工作的页面。另一个页面停止工作。如果我先使用父页面，则子页面会中断。如果我先使用孩子，父母就会休息。

我做错了吗？我猜 JSF 不是为这种行为而设计的，这很好，但是我该如何去做我想做的事呢？

基本上，我们有一个报告页面。当用户单击报告的链接时，我们希望报告动态加载到现有页面中。这样，用户不会体验到页面刷新。这是一个非常巧妙的行为，但由于页面中断，显然并不理想。

我想我可以使用包含输出面板中的每个报告的页面来执行此操作，然后根据支持 bean 中的值确定呈现哪个页面，但我可以看到很多我希望能够做到的场合将一个页面“注入”到另一个页面（例如用于动态对话框），将所有内容都保存在一个巨大的模板中会很糟糕。

还有其他人遇到过这种问题吗？你是怎么解决的？

Answer 1

不要使用jQuery.load()。它根本不考虑 JSF 视图状态，因此所有表单都将无法工作。而是使用<f:ajax> 和rendered 属性。这是一个基本示例：

<h:form id="list">
    <h:dataTable value="#{bean.reports}" var="report">
        <h:column>#{report.name}</h:column>
        <h:column>
            <h:commandLink value="Edit" action="#{bean.edit(report)}">
                <f:ajax render=":edit" />
            </h:commandLink>
        </h:column>
    </h:dataTable>
</h:form>

<h:form id="edit">
    <h:panelGrid columns="3" rendered="#{not empty bean.report}">
        <h:outputLabel for="name" value="Name" />
        <h:inputText id="name" value="#{bean.report.name}" required="true" />
        <h:message for="name" />

        ...

        <h:panelGroup />
        <h:commandButton value="save" action="#{bean.save}" />
        <h:messages globalOnly="true" layout="table" />
    </h:panelGrid>
</h:form>

如有必要，您可以将内容拆分为 <ui:include>。