java - 使用 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”。谢谢大家的建议！