HTML 4 <button> in JSF 2.1

Question

I would like to use the commands:

The JSF <h:commandButton> generates an <input...> but I would like that instead of generating the <input> I would like that this generate a HTML 4 standard<button>.

Answer 1

You should look into the Primefaces p:commandButton. This will render to a <button> tag on the client.

http://www.primefaces.org/showcase/ui/commandButton.jsf

Answer 2

Closest what you can get with standard JSF component set is <input type="button"> which is generated by <h:button>.

<h:button value="Button" />

which generates

<input id="j_id_1" name="j_id_1" type="button" value="Button" onclick="window.location.href = '/context/currentpage.xhtml'" />

If you really insist in using <button> for some unclear reason, then you have the following options:

• Just use plain HTML.
• Create a custom component and/or renderer.
• Grab a 3rd party component library. E.g. PrimeFaces' <p:button> generates a <button>.

Answer 3

If you are using JSF 2.2, you can just use the <button> tag with jsf namespace mixed. The secret here is the attribute process from jsf namespace, that post the form data, and the action attribute.

<button type="submit" class="btn btn-primary" 
    jsf:action="#{profileController.updateProfile}"
    jsf:process="@form">
        <i class="fa fa-floppy-o" aria-hidden="true"></i>
            #{bundle['button.store']}
</button>

In JSF 2.2 you can use any HTML tag mixing with JSF tags.

Answer 4

It works for me by replacing <button> with <h:commandLink>, example: Replace

<button class="RUIFW-btn-primary pull-right" 
        type="submit" 
        name="action" 
        value="Find" 
        onClick="return submitPage(this);">
     <span class="icon-search"></span>Find
</button> 

with

<h:commandLink styleClass="RUIFW-btn-primary pull-right" 
title="#{msg['view.button.Find']}"
action="#{anotherAccountController.doFind}"
onclick="return submitPage(this.form)">
<span class="icon-search"></span>#{msg['view.button.Find']}
</h:commandLink>