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>

选项卡“one”和“three”有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>

要成功执行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”。谢谢大家的提议！

使用RichFaces tabpanel提交表单时，不会更新数据模型

3 个答案: