Toggle images using ajax - jsf

Question

I have 4 buttons, each button will display one image using Ajax.
<h:form>
<h:commandButton value="Click" action="#{userAjaxData.toggleStatus}">
<f:ajax render="Family" />
</h:commandButton>
<h:commandButton value="Click" action="#{userAjaxData.toggleStatus}">
<f:ajax render="Karam"/>
</h:commandButton>
<h:commandButton value="Click" action="#{userAjaxData.toggleStatus}">
<f:ajax render="Memo"/>
</h:commandButton>
<h:commandButton value="Click" action="#{userAjaxData.toggleStatus}">
<f:ajax render="Baba"/>
</h:commandButton>
<h:panelGroup id="Family">
<p:graphicImage library="images/img" name="family.png" id="FamilyImg" rendered="#{userAjaxData.status}"/>
</h:panelGroup>
<h:panelGroup id="Karam">
<p:graphicImage library="images/img" name="Karam.png" id="KaramImg" rendered="#{userAjaxData.status}"/>
</h:panelGroup>
<h:panelGroup id="Memo">
<p:graphicImage library="images/img" name="memo.png" id="MemoImg" rendered="#{userAjaxData.status}"/>
</h:panelGroup>
<h:panelGroup id="Baba">
<p:graphicImage library="images/img" name="baba.png" id="BabaImg" rendered="#{userAjaxData.status}"/>
</h:panelGroup>
</h:form>
My manged bean:
#ManagedBean(name = "userAjaxData", eager = true)
#SessionScoped
public class UserAjaxData implements Serializable {
private static final long serialVersionUID = 1L;
private boolean status = false;
public void toggleStatus() {
status = true;
}
public boolean isStatus() {
return status;
}
public void setStatus(boolean status) {
this.status = status;
}}
when I click any button It will display the related image, so if I click the first one it will display the first image, and the second button will display the second image but the first image will not removed. I just need one way to display one image each time I click button. so if I click the first button then the second button should the second image displayed and the first one disappear.
How can I mange it?

Answer 1

If your usecase is really that simple, I would recommend using only one always rendered <h:graphicImage /> (no need for PrimeFaces GraphicImage in this case) and set the appropriate image to show in the backing bean via ajax instead of one or multiple toggle statuses with something like this:
<h:form id="form">
<h:commandButton
id="familyButton"
action="#{toggleImageView.setImage('family.png')}"
value="Family"
>
<f:ajax render="image" />
</h:commandButton>
<h:commandButton
id="karamButton"
action="#{toggleImageView.setImage('karam.png')}"
value="Karam"
>
<f:ajax render="image" />
</h:commandButton>
<h:commandButton
id="memoButton"
action="#{toggleImageView.setImage('memo.png')}"
value="Memo"
>
<f:ajax render="image" />
</h:commandButton>
<h:commandButton
id="babaButton"
action="#{toggleImageView.setImage('baba.png')}"
value="Baba"
>
<f:ajax render="image" />
</h:commandButton>
<br />
<h:graphicImage
id="image"
library="image/img"
name="#{toggleImageView.image}"
/>
</h:form>
#ManagedBean
#RequestScoped
public class ToggleImageView {
private String image;
#PostConstruct
public void initialize() {
image = "family.png";
}
public String getImage() {
return image;
}
public void setImage(String image) {
this.image = image;
}
}
Just adapt to your needs.