Toggle rendering of image with ajax?

Question

How can I show an image depending on a boolean status variable that is triggered by a button? I do not want that entire page to reload, but just that specific image.

Facelets page:

 </h:form>
    <h:commandButton value="test" action="#{bean.toggleStatus}">
        <f:ajax render="image"/>
    </h:commandButton>
    <h:graphicImage id="image" value="status.gif" rendered="#{bean.status}"/>
 </h:form>

Backing class:

    class Bean {

        private boolean status = false;

        public void toggleStatus() {
            status = true;
        }

        //getter, setter
    }

Any idea what might be wrong here?

Try to put a placeholder around h:graphicImage and rerender that placeholder instead of image itself. Keep the rendered attribute on h:graphicImage. — kavai77, Oct 05 '12 at 10:22
Yes I see the image without rendered attribute. If I surround it with `` it does not work either — membersound, Oct 05 '12 at 10:27

score 4 · Accepted Answer · edited May 23 '17 at 12:31

You can't ajax-update a HTML element which is not rendered to the HTML side. Wrap it in a component which is always rendered and update it instead.

E.g.

<h:form>
    <h:commandButton value="test" action="#{bean.toggleStatus}">
        <f:ajax render="image"/>
    </h:commandButton>
    <h:panelGroup id="image">
        <h:graphicImage value="status.gif" rendered="#{bean.status}"/>
    </h:panelGroup>
</h:form>

Toggle rendering of image with ajax?

1 Answers1

See also: