CODEWITHSUNDEEP
ajaxjsf-2rendering
CyberGriZzly
CyberGriZzly

Reputation: 489

After showing / hiding a JSF element with AJAX how to hide the triggering element?

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

Upvotes: 2

Views: 4289

Answers (1)

BalusC
BalusC

Reputation: 1108642

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

Upvotes: 3

Related Questions