使用 RichFaces 选项卡面板提交表单时未更新数据模型

Question

我的页面中有以下布局（简化）

<h:form>
    <h:commandButton action="#{bean.save} value="Save"/>

    <rich:tabPanel switchType="ajax">
        <rich:tab name="one" switchType="client">

        </rich:tab>

        <rich:tab name="two" switchType="ajax">

        </rich:tab>

        <rich:tab name="three" switchType="client">

        </rich:tab>

    </rich:tabPanel>
</h:form>

选项卡“一”和“三”有 switchType="client"，它们上有一些输入，绑定到 bean 属性。当按下“保存”时，我希望 bean 属性将从两个选项卡中的输入更新。但是，仅从当前选项卡上的输入更新属性。尽管提交了整个表单（我已在 HTTP 观察程序中检查过），但来自另一个选项卡的值会丢失。因此，用户必须在一个选项卡中输入数据，按“保存”，然后在另一个选项卡上更新值并按“保存”以保存所做的所有更改。如何一次从所有选项卡中传播值？

Answer 1

您可以使用 javascript 轻松完成此操作。您需要做的所有事情（一旦设置了选项卡）就是添加逻辑以显示和隐藏不同的选项卡式组件。

Answer 2

首先，将<h:commandButton /> 更改为<a4j:commandButton />，这样您的提交将通过对服务器的ajax 请求进行。也可以在操作后重新渲染页面内容。

<h:form>
    <!-- RichFaces 3.3 -->
    <a4j:commandButton value="Save"
        action="#{bean.save}"
        reRender="tbpMyTabs" />
    <!-- RichFaces 4. -->
    <a4j:commandButton value="Save"
        action="#{bean.save}"
        render=":tbpMyTabs" />

    <rich:tabPanel id="tbpMyTabs" switchType="ajax">
        <rich:tab name="one" switchType="client">
        </rich:tab>
        <rich:tab name="two" switchType="ajax">
        </rich:tab>
        <rich:tab name="three" switchType="client">
        </rich:tab>
    </rich:tabPanel>
</h:form>

要发出成功的 action ajax 请求，请将 Save 方法更改为返回 void，这样 JSF 就不会遵循导航规则。如果您使用 JSF 2，您的 bean 应该有视图范围，否则它应该有请求范围和 KeepAlive 注释。

RichFaces 3.3 Bean 实现

@KeepAlive
public class Bean {
    public Bean() {
    }
    public void save() {
    }
}

JSF 2 / RichFaces 4.x Bean 实现

@ManagedBean
@ViewScoped
public class Bean {
    public Bean() {
    }
    public void save() {
    }
}

Answer 3

已找到解决方案：我已将tabpanel的switchType从“ajax”更改为“client”。谢谢大家的建议！