显示/隐藏与AJAX一个JSF元素如何隐藏触发元素之后？ [英] After showing / hiding a JSF element with AJAX how to hide the triggering element?

问题描述

我接着BalusC给出的intructions [这个答案] [1]

[1]： JSF和F：AJAX的隐藏/显示DIV 和它的工作。但我想隐藏的元素时，命令按钮是pressed，并用id =incorrectQuestion显示的元素。我做到了，几乎像在例子。我已经尝试了很多组合，但我不能隐藏命令按钮。

 ＆LT; H：panelGroup中呈现=＃{不answerResultBean.showIncorrectQuestions}＆GT;
                ＆LT; D​​IV ID =loginDiv的风格=宽度：400像素;文本对齐：左;＆GT;
                    ＆LT;中心＆GT;
                        ＆LT; F：AJAX渲染=incorrectQuestions＆GT;
                            ＆LT; BR /＆GT;
                            ＆LT; H：的commandButton值=＃{strings.failedQuestions}
                                行动=＃{answerResultBean.setShowIncorrectQuestions（TRUE）}/＆GT;
                            ＆LT; BR /＆GT;
                            ＆LT; BR /＆GT;
                        ＆LT; / F：AJAX＆GT;
                    ＆LT; /中心＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; /小时：panelGroup中＆GT;
            ＆所述; H：panelGroup中的id =incorrectQuestions＆GT;
                ＆LT; H：panelGroup中呈现=＃{answerResultBean.showIncorrectQuestions}＆GT;
                    ＆LT; D​​IV ID =loginDiv的风格=宽度：400像素;文本对齐：左;＆GT;
            ...
 

解决方案

只要把＆LT; H：panelGroup中＆GT; 包含在＆LT按钮; H：panelGroup中的id =incorrectQuestions＆GT; 为好。这样，它也将被更新Ajax请求和渲染的条件会导致它被隐藏。

顺便说一句，尽量保持你的code干燥。你已经有相当长的一段code重复。

 ＆LT; H：panelGroup中布局=块ID =loginDiv的风格=宽度：400像素;文本对齐：左;＆GT;
    ＆LT; H：的commandButton值=＃{strings.failedQuestions}
        行动=＃{answerResultBean.setShowIncorrectQuestions（TRUE）}
        风格=文本对齐：中心;保证金：10px的;
        渲染=＃{不answerResultBean.showIncorrectQuestions}＆GT;
        ＆LT; F：AJAX渲染=loginDiv＆GT;
    ＆LT; / H：的commandButton＆GT;
    ＆LT; H：panelGroup中呈现=＃{answerResultBean.showIncorrectQuestions}＆GT;
        ...
    ＆LT; /小时：panelGroup中＆GT;
＆LT; /小时：panelGroup中＆GT;
 

请注意，＆LT; H：panelGroup中布局=块＆GT; 生成一个＆LT; D​​IV＆GT; 。这样，就没有必要对＆LT; H：panelGroup中＆GT;＆LT; D​​IV＆GT;

。

I followed the intructions given by BalusC in [this answer][1]

[1]: JSF and f:ajax for hiding/showing div and it worked. But I want to hide the element when the command button is pressed and the element with the id="incorrectQuestion" is shown. I did it almost like in the example. I have tried a lot of combinations but I couldn't hide the command button.

            <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;">
            ...

解决方案

Just put the <h:panelGroup> containing the button inside <h:panelGroup id="incorrectQuestions"> as well. This way it will also be updated on ajax request and the rendered condition would cause it to be hidden.

By the way, try to keep your code DRY. You've there quite some code duplication.

<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>

Note that a <h:panelGroup layout="block"> generates a <div>. This way there's no need for a <h:panelGroup><div>.

这篇关于显示/隐藏与AJAX一个JSF元素如何隐藏触发元素之后？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！