Ajax update fails to increment counter bean in JSF

Question

I am beginning to code in JSF and PrimeFaces 6.1.
My index.xhtml looks like:

<?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:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">

<h:body>
    <h:inputText id="counter">
        <p:ajax update="out" listener="#{counterBean.increment}" />
    </h:inputText>
    <h:outputText id="out" value="#{counterBean.count}" />
</h:body>
</html>

And the CounterBean.java is:

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class CounterBean implements Serializable {

    private int count = 0;

    public void increment() {
        count++;
    }

    public int getCount() {
        return count;
    }
    public void setCount(int name) {
        this.count = name;
    }
}

And even though I see the widgets for inputText and outputText are displayed, there is no ajax call made when the value of inputText changes. Similarly, the value of outputText does not change too when inputText changes.

What is wrong in the above code?

Possible duplicate of [commandButton/commandLink/ajax action/listener method not invoked or input value not updated](https://stackoverflow.com/questions/2118656/commandbutton-commandlink-ajax-action-listener-method-not-invoked-or-input-value) — Kukeltje, Jun 26 '17 at 09:04

score 2 · Accepted Answer · answered Jun 25 '17 at 23:04

2

You are missing 2 things, The: <h:head></h:head> that will include the required JavaScript libraries, and you need to wrap your inputs in a h:form:

<?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://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
    <h:form>
        <h:inputText id="counter">
            <p:ajax update="out" listener="#{counterBean.increment}"/>
        </h:inputText>
        <h:outputText id="out" value="#{counterBean.count}"/>
    </h:form>
</h:body>
</html>

answered Jun 25 '17 at 23:04

Ouerghi Yassine

1,835
7
43
72

Thanks. I get the reason for `h:head` but I dont get the need for `h:form`. Do all the interlinked elements (or ajax-enabled elements) have to be inside `h:form` ? Is there a good documentation explaining this? – user2250246 Jun 26 '17 at 00:31
Lots of these 'basic' issues already have Q/A in stackoverflow (often with detailed explanations) Please find them and mark the questions as such. This prevents fragmentation – Kukeltje Jun 26 '17 at 09:05
Thank you so much buddy, I was facing other issues and thanks to this all has been solved. Great answer. Thank you very much. – Dan Ortega Aug 23 '18 at 15:12

Ajax update fails to increment counter bean in JSF

1 Answers1