p:ajax enables ajax features on supported components.
<div class="card">
<h:form>
<h:panelGrid columns="3" cellpadding="5">
<h:outputText value="KeyUp: "/>
<p:inputText id="firstname" value="#{userView.firstname}">
<p:ajax event="keyup" update="out1" process="@this"/>
</p:inputText>
<h:outputText id="out1" value="#{userView.firstname}"/>
<h:outputText value="Blur: "/>
<p:inputText id="middlename" value="#{userView.middlename}">
<p:ajax event="blur" update="out2"/>
</p:inputText>
<h:outputText id="out2" value="#{userView.middlename}"/>
<h:outputText value="Input: "/>
<p:inputText id="lastname" value="#{userView.lastname}">
<p:ajax event="input" update="out3"/>
</p:inputText>
<h:outputText id="out3" value="#{userView.lastname}"/>
</h:panelGrid>
</h:form>
</div>
@Named
@RequestScoped
public class UserView {
private String firstname;
private String middlename;
private String lastname;
public String getFirstname() {
return firstname;
}
public void setFirstname(String firstname) {
this.firstname = firstname;
}
public String getMiddlename() {
return middlename;
}
public void setMiddlename(String middlename) {
this.middlename = middlename;
}
public String getLastname() {
return lastname;
}
public void setLastname(String lastname) {
this.lastname = lastname;
}
public void save() {
FacesContext.getCurrentInstance().addMessage(null,
new FacesMessage("Welcome " + firstname + " " + middlename + " " + lastname));
}
}