JSF ajax event does not work in form

Question

Yesterday I created a really simple JSF project to practice how to render a dynamic menu with Ajax request. The addition method works pretty well, but in case I switch to another tab the result is not calculated and displayed in the page. I debugged the code for hours, but till yet I haven't found the root cause. Do you have any idea what the problem can be?

Web Pages

index.xhtml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://xmlns.jcp.org/jsf/html"
  xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
  xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
    <title>Mathematics</title>
</h:head>
<h:body>
    <h:panelGroup id="menu">
        <h:form>
            <f:ajax render="page">
                <h:commandButton value="Addition" action="#{menuMB.setPage('addition')}"></h:commandButton>
                <h:commandButton value="Subtraction" action="#{menuMB.setPage('subtraction')}"></h:commandButton>
                <h:commandButton value="Multiplication" action="#{menuMB.setPage('multiplication')}"></h:commandButton>
                <h:commandButton value="Division" action="#{menuMB.setPage('division')}"></h:commandButton>
            </f:ajax>
        </h:form>
    </h:panelGroup>
    <h:panelGroup id="page">
        <ui:include src="/WEB-INF/includes/#{menuMB.page}.xhtml"/>
    </h:panelGroup>
</h:body>
</html>

addition.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:h="http://xmlns.jcp.org/jsf/html"
            xmlns:ui="http://java.sun.com/jsf/facelets">
<h:panelGroup id="header">
    <h1>Addition</h1>
</h:panelGroup>
<h:panelGroup id="content">
    <h:form id="addition">
        <h:outputLabel for="number1" value="Number1:"/>
        <h:inputText id="number1" value="#{mathMB.number1}">
            <f:ajax event="keyup" listener="#{mathMB.addition}" execute="number1 number2" render="result"/>
        </h:inputText>
        <h:outputLabel for="number2" value="Number2:"/>
        <h:inputText id="number2" value="#{mathMB.number2}">
            <f:ajax event="keyup" listener="#{mathMB.addition}" execute="number1 number2" render="result"/>
        </h:inputText>
        <h:outputLabel for="result" value="Result:"/>
        <h:outputText id="result" value="#{mathMB.result}"/>
    </h:form>
</h:panelGroup>

All other xhtml pages (division, multiplication, subtraction) are the same as above, only the addition method is changed with the proper one.

Managed Beans

MathMB

@ManagedBean
@RequestScoped
public class MathMB {

    private Integer number1;
    private Integer number2;
    private Integer result;

    public void addition() {
        if (number1 == null || number2 == null) {
            return;
        }
        result = number1 + number2;
    }

    subtraction...
    multiplication...
    division...

    //getters + setters
}

MenuMB

@ManagedBean
@ViewScoped
public class MenuMB implements Serializable {

    private String page;

    @PostConstruct
    public void init() {
        page = "addition";
    }

    public String getPage() {
        return page;
    }

    public void setPage(String page) {
        this.page = page;
    }
}

Thanks a lot for any tips!

This is known to fail if the include in turn contains a form. Is this acceptable as duplicate? http://stackoverflow.com/questions/7108668/how-to-ajax-refresh-dynamic-include-content-by-navigation-menu — BalusC, Jul 16 '15 at 08:13

score -1 · Answer 1 · answered Jul 16 '15 at 08:11

You need to put the <f:ajax> tag inside the commandbuttons, not the other way round.

<h:commandButton value="Addition" action="#{menuMB.setPage('addition')}">
    <f:ajax render="page"/>
</h:commandButton>
<h:commandButton value="Subtraction" action="#{menuMB.setPage('subtraction')}">
    <f:ajax render="page"/>
</h:commandButton>
...

JSF ajax event does not work in form

1 Answers1