ajax - 如何使用 jQuery 的 AJAX 将一个 JSF2 页面注入(inject)另一个页面

Question

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

在加载的 JSF 页面使用某些 AJAX 功能之前，这种方法非常有效。发生这种情况时，父 JSF 页面的 AJAX 将停止工作。事实上，在两个页面合并后，无论哪个页面接下来调用其 AJAX，该页面都会继续工作。另一个页面停止工作。如果我先使用父页面，子页面就会崩溃。如果我先使用子进程，父进程就会崩溃。

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

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

我想我可以使用一个包含输出面板中每个报告的页面来完成此操作，然后根据支持 bean 中的值确定渲染哪个报告，但我可以看到很多情况下我希望能够将一个页面“注入(inject)”到另一个页面(例如动态对话框)，而必须将所有内容都保留在一个巨大的模板中会很糟糕。

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

Answer 1

请勿使用jQuery.load() 。它根本不考虑 JSF View 状态，因此所有表单都将无法工作。而是利用<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> .