通过ajax显示和隐藏primefaces选项卡

时间:2016-12-16 18:58:02

标签: ajax primefaces

我有以下水面版本的primefaces标签视图。

<p:tabview>
    <p:tab id="1">
        <p:selectOneMneu value="#{bean.answer}>
            <f:selectItem itemValue="yes"/>
            <f:selectItem itemValue="no" />
        </p:selectOneMenu>
    </p:tab>
    <p:tab id="2" rendered=#{bean.answer eq 'yes'} >
        <h:outputText="answer is Yes."/>
    </p:tab>
    <p:tab id="3" rendered=#{bean.answer eq 'no'} >
        <h:outputText="answer is No."/>
    </p:tab>
</p:tabView>

有一个托管bean可以捕获“是”或“否”的选定值。评估值时,取决于答案,其中一个选项卡将被隐藏。一旦您对所做的选择感到满意,他/她点击提交按钮发布数据。

我的问题是如果用户在按下提交按钮之前改变了主意。返回下拉菜单(selectOneMenu),然后将值从“yes”更改为“no”。然后,我希望动态bean将检索更新的答案,而无需刷新整个xhtml页面。似乎ajax就是答案,但我不知道如何解决它。

1 个答案:

答案 0 :(得分:0)

在这里,它对我有用。我希望这就是你所需要的。现在您不必刷新页面,但必须更新表单。我不知道为什么,但更新tabView不会产生任何影响。

<h:form>

    <p:tabView>

        <p:tab title="select">
            <p:selectOneMenu value="#{bean.answer}">
                <f:selectItem itemValue="none" itemLabel="select" />
                <f:selectItem itemValue="yes" itemLabel="yes" />
                <f:selectItem itemValue="no" itemLabel="no" />
                <f:ajax event="change" render="@form"/>
            </p:selectOneMenu>
        </p:tab>

        <p:tab title="yes" rendered="#{bean.answer.equals('yes')}">
            <h:outputText value="answer is Yes." />
        </p:tab>

        <p:tab title="no" rendered="#{bean.answer.equals('no')}">
            <h:outputText value="answer is No." />
        </p:tab>

    </p:tabView>

</h:form>