Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The <em>default</em> behaviour of the <code>&lt;h:commandButton&gt;</code> (and <code>&lt;h:commandLink&gt;</code>) is to submit the parent POST form which is specified by <code>&lt;h:form&gt;</code>.</p> <p>The <code>onclick</code> 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 <code>return false;</code> to the onclick.</p> <p>In case of <code>&lt;h:commandButton&gt;</code>, the component's <code>type</code> attribute defaults to <code>submit</code> and it will generate a HTML <code>&lt;input type="submit"&gt;</code>. When you change it to <code>button</code>, 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 <code>&lt;input type="button"&gt;</code>. When using the component's <code>image</code> 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 <code>background-image</code> instead) and the component's <code>type</code> attribute will be <em>ignored</em> and it will generate a HTML <code>&lt;input type="image"&gt;</code>.</p> <p>This is all clearly documented in <em>Encode Behavior</em> section of the <a href="http://docs.oracle.com/javaee/6/javaserverfaces/2.1/docs/vdldocs/facelets/h/commandButton.html" rel="nofollow">tag documentation</a>.</p> <p>If your sole requirement is to block the <code>&lt;h:commandButton type="image"&gt;</code> from submitting the parent form, then you need to add <code>return false;</code> to the onclick, as said before:</p> <pre><code>&lt;h:commandButton image="/resources/empty.jpg" onclick="#{CodeBean.click}; return false;" /&gt; </code></pre> <p>An alternative is to use <code>type="button"</code> in combination with a CSS background image (so that you aren't abusing the <code>image</code> attribute):</p> <pre><code>&lt;h:commandButton type="button" styleClass="emptyButton" onclick="#{CodeBean.click}" /&gt; </code></pre> <p>with the following in a CSS file which is loaded by <code>&lt;h:outputStylesheet&gt;</code>:</p> <pre class="lang-css prettyprint-override"><code>.emptyButton { background-image: url(#{resource['empty.jpg']}); } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload