<h:commandButton> not working inside <ui:define>

Question

I created a facelet template called loginRegisterTemplate.xhtml. When I use it in a template client and I place a in it, the method in the managed bean is not invoked. Without the template the button is working fine. Why is this happening?

    <ui:composition template="resources/css/faceletsTemplates/loginRegisterTemplate.xhtml">
        <ui:define name="top">
            Login Page
        </ui:define>
        <ui:define name="content">
            <div align="center">
                <h:panelGrid columns="3" columnClasses="rightalign,leftalign,leftalign">

                    <h:outputLabel value="Username:" for="userName"/>
                    <h:inputText id="userName" label="Username" required="true" value="#{loginBean.userName}" />
                    <h:message for="userName" />

                    <h:outputLabel value="Password:" for="password"/>
                    <h:inputText id="password" label="Password" required="true" value="#{loginBean.password}" />
                    <h:message for="password" />
                </h:panelGrid><br/>

                <h:button value="Back to Home" outcome="home"/>
                <h:commandButton id="login" value="Login" action="#{loginBean.doLogin}"/>
            </div>
        </ui:define>
    </ui:composition>
</h:body>

The simple <h:button> next to it, on the other side, is working fine.

Here is the body of my template file:

<h:body>
    <div id="top">
        <ui:insert name="top">Top</ui:insert>
    </div>
    <div id="content" class="center_content">
        <ui:insert name="content">Content</ui:insert>
    </div>
</h:body>

I have looked here: h:commandLink / h:commandButton is not being invoked but I couldn't find which problem causes that.

Thanks!

Answer 1

Why is the h:commandButton not working?

Your problem is number 1 in the answer you have checked.

UICommand and UIInput components must be placed inside an UIForm component, e.g. <h:form>.

Why is the h:button working then ?

from the h:button docs:

Render an HTML "input" element of type "button". The value of the component is rendered as the button text and the outcome of the component is used to determine the target URL which is activated by onclick.

So ...

JSF will put your h:button outcome value in a javascript function that will be executed at an onclick event. But it will execute the action of the h:commandButton on the form submit with the POST method, so there should be a form to submit.