ajax - 使用 AJAX 显示/隐藏 JSF 元素后如何隐藏触发元素？

Question

我按照 BalusC 在[此答案][1]中给出的说明进行操作

[1]:JSF and f:ajax for hiding/showing div它起作用了。但我想在按下命令按钮并显示 id="in CorrectQuestion"的元素时隐藏该元素。我几乎像例子中那样做了。我尝试了很多组合，但无法隐藏命令按钮。

            <h:panelGroup rendered="#{not answerResultBean.showIncorrectQuestions}">
                <div id="loginDiv" style="width: 400px; text-align: left;">
                    <center>
                        <f:ajax render="incorrectQuestions">
                            <br />
                            <h:commandButton value="#{strings.failedQuestions}"
                                action="#{answerResultBean.setShowIncorrectQuestions(true)}" />
                            <br />
                            <br />
                        </f:ajax>
                    </center>
                </div>
            </h:panelGroup>
            <h:panelGroup id="incorrectQuestions">
                <h:panelGroup rendered="#{answerResultBean.showIncorrectQuestions}">
                    <div id="loginDiv" style="width: 400px; text-align: left;">
            ...

Answer 1

只需输入 <h:panelGroup>包含里面的按钮 <h:panelGroup id="incorrectQuestions">以及。这样它也将根据 ajax 请求和 rendered 进行更新。条件会导致它被隐藏。

顺便说一下，尽量保持代码干燥。你有相当多的代码重复。

<h:panelGroup layout="block" id="loginDiv" style="width: 400px; text-align: left;">
    <h:commandButton value="#{strings.failedQuestions}"
        action="#{answerResultBean.setShowIncorrectQuestions(true)}"
        style="text-align: center; margin: 10px;"
        rendered="#{not answerResultBean.showIncorrectQuestions}">
        <f:ajax render="loginDiv">
    </h:commandButton>
    <h:panelGroup rendered="#{answerResultBean.showIncorrectQuestions}">
        ...
    </h:panelGroup>
</h:panelGroup>

请注意 <h:panelGroup layout="block">生成 <div> 。这样就不需要 <h:panelGroup><div> .