Not to reload page on a link click - jsf

Question

I have a design which consists of images for links.
They must work like a select component, for example when i click one link, in the back side i control which one is selected.
After user want to commit his/her changes he/she click a submit button and save the selections.
So i need a h:blahblah component for get selection that does not reload page when user click it, and maybe click again to unselect maybe click again to select again.
I need h: component because i can change only their css easily.
I also will be glad if you share your advises on how can i achive this job too.
Thanks
SOLVED by my colleague
<h:outputLink value="javascript:void(0);"><p:ajax event="click"
listener="#{beanView.method()}"/>My Link</h:outputLink>

Answer 1

You could use <f:ajax> in combination with a #ViewScoped managed bean for this. Let the listener of <f:ajax> set the selected image value. You can just nest <f:ajax> inside <h:graphicImage>.
<h:form>
<h:graphicImage name="image1.png">
<f:ajax event="click" listener="#{bean.setSelectedImage('image1')}" />
</h:graphicImage>
<h:graphicImage name="image2.png">
<f:ajax event="click" listener="#{bean.setSelectedImage('image2')}" />
</h:graphicImage>
<h:graphicImage name="image3.png">
<f:ajax event="click" listener="#{bean.setSelectedImage('image3')}" />
</h:graphicImage>
<h:commandButton value="Submit" action="#{bean.submit}" />
</h:form>
with
#ManagedBean
#ViewScoped
public class Bean {
private String selectedImage;
public void submit() {
System.out.println(selectedImage);
}
// ...
}