隐藏组件，然后显示它，值不会保存

Question

我有一个带有ajaxized选项卡的JSF 2.0 Web应用程序。

为了切换选项卡，我显示一个选项卡并隐藏其他选项卡（使用条件render="#{x==y}"或通过条件styleClass'ing使用display:none/block。

在任何一种情况下，我都会让选项卡正确显示或隐藏。

问题是在输入框中输入的值不会保留，从而隐藏/显示选项卡（换句话说，如果您在选项卡 1 中输入一些值，转到选项卡 2 并返回选项卡 1，则不会保留这些值）。

我在选项卡选择上使用此<f:ajax>标签（由哈希更改事件引发）

<h:form id="processFragment" prependId="false" class="hide">
    <h:inputText id="fragment" value="#{fbean.fragment}">
        <f:ajax event="change" execute="contentSection" listener="#{fbean.processFragment}"
            render="contentSection" />
    </h:inputText>
</h:form>
<div>
    <h:form id="contentSection">
        <ui:insert name="content" />
    </h:form>
</div>

谢谢！

显示选项卡栏和选项卡内容的代码：

<ui:define name="content">
    <f:view>
        <h:panelGroup styleClass="navBar">
            <ul>
                <ui:repeat value="#{hello.tabList}" var="tab">
                    <li onclick="window.location='##{tab.tabHash}'"><h:panelGroup
                            styleClass="#{hello.chose == tab.tabHash?'activeTab':''}">
                            <h:outputText value="#{tab.tabName}" />
                        </h:panelGroup>
                    </li>
                </ui:repeat>
            </ul>
        </h:panelGroup>
        <h:panelGroup id="contentPanels" styleClass="tabContentBar">
            <c:forEach items="#{hello.tabList}" var="tab">
                <h:panelGroup rendered="#{hello.chose == tab.tabHash}">
                    <!-- <h:panelGroup styleClass="#{hello.chose == tab.tabHash?'shownTabContents':'hiddenTabContents'}">  -->
                    <ui:include src="#{tab.tabFile}" />
                </h:panelGroup>
            </c:forEach>
        </h:panelGroup>
    </f:view>
</ui:define>

最后，特定选项卡的内容：

<h:outputText value="TESTING 1" />
<h:panelGroup styleClass="formField">
    <h:outputText value="Enter Value:" />
    <h:inputText value="#{general.name}" />
</h:panelGroup>

更新刚刚注意到，即使我不隐藏选项卡并按下按钮，该值也会重置。调查。。。

Answer 1

仅当您使用视图范围的 Bean 并且在选项卡导航期间（或之前）将所需的表单提交到服务器端时，才会保留这些值。

作为替代方案，您可以一次呈现所有选项卡，并仅使用 JS/CSS 来显示/隐藏选项卡内容。CSS 隐藏的输入仍将提交到服务器端。