JSF commandButton 'onclick' event not persistent - jsf-2

Question

i want to have a click-able images, which change on roll-over/out/click. needless to say, i want that after the 'onclick' the page won't reload.
i'm trying to accomplish this with either h:image or h:commandButton - both don't work as expected.
the most annoying this is this:
i have in my code-bean the following simple function:
public String getClick()
{
return "alert('abc')";
}
and in the jsp file, the following code:
<td><h:commandButton id="a" type="button" value="click" onclick="#{CodeBean.click}" /></td>
<td><h:commandButton id="b" type="button" image="/resources/empty.jpg" onclick="#{CodeBean.click}" />
upon click, both raise the alert box, however, only the second one reloads the page, while the first one doesn't. don't know what i has to do with it, but when i look at the compiled page's source, i see that the first button's type stays 'button', but the second one is turned into 'image'.
any suggestions?
cheers,
eRez

Answer 1

The default behaviour of the <h:commandButton> (and <h:commandLink>) is to submit the parent POST form which is specified by <h:form>.
The onclick attribute just allows the developer to execute some piece of JavaScript code right before the form is been submitted. It does by default not block the form submit. If you'd like to block the button's default behaviour (submitting the form), then you'd need to add return false; to the onclick.
In case of <h:commandButton>, the component's type attribute defaults to submit and it will generate a HTML <input type="submit">. When you change it to button, then it will be turned in a "dead" button which does basically nothing, expect of executing any JavaScript handlers attached to it, and it will generate a HTML <input type="button">. When using the component's image attribute, then it will be turned in an image map which allows you to submit the X,Y position of the cursor relative to the image (however, in your case you seem to want just a background image; in that case you should actually be using CSS background-image instead) and the component's type attribute will be ignored and it will generate a HTML <input type="image">.
This is all clearly documented in Encode Behavior section of the tag documentation.
If your sole requirement is to block the <h:commandButton type="image"> from submitting the parent form, then you need to add return false; to the onclick, as said before:
<h:commandButton image="/resources/empty.jpg" onclick="#{CodeBean.click}; return false;" />
An alternative is to use type="button" in combination with a CSS background image (so that you aren't abusing the image attribute):
<h:commandButton type="button" styleClass="emptyButton" onclick="#{CodeBean.click}" />
with the following in a CSS file which is loaded by <h:outputStylesheet>:
.emptyButton {
background-image: url(#{resource['empty.jpg']});
}