Search code examples
jsfjsf-2primefacesprimefaces-mobile

How to connect command button to action handler in PrimeFaces mobile rendering mode?


I have a PrimeFaces page with following form:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pm="http://primefaces.org/mobile">

<f:view renderKitId="PRIMEFACES_MOBILE"/>

<h:head>

</h:head>

<h:body>

    <pm:page>
        <pm:header title="Test"></pm:header>

        <pm:content>
            <p:panel header="Login">
                <h:form>
                    <pm:field>
                        <p:outputLabel for="basic" value="User:"/>
                        <p:inputText id="basic"/>
                    </pm:field>

                    <pm:field>
                        <p:outputLabel for="password" value="Password:"/>
                        <p:password id="password"/>
                    </pm:field>

                    <p:commandButton value="Login" type="button"
                                     actionListener="#{index.loginButtonAction}"/>
                </h:form>
            </p:panel>
        </pm:content>
    </pm:page>
</h:body>

</html>

And I have the class IndexView defined as follows.

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;

@ManagedBean(name = "index")
@RequestScoped
public class IndexView {
    public void loginButtonAction(ActionEvent actionEvent)
    {
        System.out.println("loginButtonAction");
        addMessage("loginButtonAction");
    }

    public void registerButtonAction(ActionEvent actionEvent)
    {
        System.out.println("registerButtonAction");
        addMessage("registerButtonAction");
    }

    public void addMessage(String summary) {
        FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, summary,  null);
        FacesContext.getCurrentInstance().addMessage(null, message);
    }
}

When I press the Login button, nothing happens. I don't even see the message in the logs.

What do I need to change in order for loginButtonAction action to be called, when the button has been pressed?

The dependencies from my pom.xml file look are these:

<dependencies>
    <dependency>
        <groupId>junit</groupId>
        <artifactId>junit</artifactId>
        <version>4.1</version>
        <scope>test</scope>
    </dependency>

    <!-- PrimeFaces (start) -->
    <dependency>
        <groupId>org.primefaces</groupId>
        <artifactId>primefaces</artifactId>
        <version>5.1</version>
    </dependency>
    <!-- PrimeFaces (end) -->

    <!-- JSF 2 (start) -->
    <dependency>
        <groupId>com.sun.faces</groupId>
        <artifactId>jsf-api</artifactId>
        <version>2.1.11</version>
    </dependency>
    <dependency>
        <groupId>com.sun.faces</groupId>
        <artifactId>jsf-impl</artifactId>
        <version>2.1.11</version>
    </dependency>

    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
    </dependency>

    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>servlet-api</artifactId>
        <version>2.5</version>
    </dependency>

    <dependency>
        <groupId>javax.servlet.jsp</groupId>
        <artifactId>jsp-api</artifactId>
        <version>2.1</version>
    </dependency>
    <!-- JSF 2 (end) -->
</dependencies>

Solution

  • Try removing

    type="button"
    

    From your commandButton. As long as its type is button it would only be clickable and won't send form data to the server.