Instead of waiting for user to submit the form manually to process the selected item, you can enable instant ajax selection by using the itemSelect ajax behavior. Let’s you consider the AutoComplete that gives you set of players to select one among of them, such that behavior can be ajaxified by eliminating the needs for submission.
- Read : PrimeFaces Tutorials
1. The View
index.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<f:view afterPhase="#{autoComplete.phaseListener}">
<h:form prependId="false">
<h1>JavaBeat Primefaces Example</h1>
<h2>Primefaces - AutoComplete + Ajax Behavior</h2>
<h:outputText value="Enter name of the player you wish to see statistics for :"/>
#{' '}
<p:autoComplete id="auto" value="#{autoComplete.players}"
completeMethod="#{autoComplete.complete}"
var="player"
itemValue="#{player}"
itemLabel="#{player.playerName}"
converter="#{playerConverter}"
multiple="true">
<p:ajax event="itemSelect" listener="#{autoComplete.handleSelect}" update="msg"></p:ajax>
<p:ajax event="itemUnselect" listener="#{autoComplete.handleUnSelect}" update="msg"></p:ajax>
</p:autoComplete>
<br/>
<p:messages id="msg"/>
</h:form>
</f:view>
</html>
2. The Managed Bean
AutoComplete.java
package net.javabeat.primefaces;
import java.util.List;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import javax.faces.event.PhaseEvent;
import net.javabeat.primefaces.data.Player;
import net.javabeat.primefaces.util.PlayerDataSource;
import org.primefaces.event.SelectEvent;
import org.primefaces.event.UnselectEvent;
@ManagedBean
@SessionScoped
public class AutoComplete {
@ManagedProperty("#{playerDataSource}")
private PlayerDataSource ds;
private List<Player> players;
public AutoComplete (){
}
public List<Player> complete(String query){
// Assumed Datasource
return ds.queryByName(query);
}
public List<Player> getPlayers() {
return players;
}
public void setPlayers(List<Player> players) {
this.players = players;
}
public PlayerDataSource getDs() {
return ds;
}
public void setDs(PlayerDataSource ds) {
this.ds = ds;
}
public void handleSelect(SelectEvent e){
Player p = (Player)e.getObject();
FacesContext.getCurrentInstance().addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_INFO,
"Add Player :: Player Info: ID :: "+ p.getPlayerId() + " :: Name :: "+p.getPlayerName(),""));
}
public void handleUnSelect(UnselectEvent e){
Player p = (Player)e.getObject();
FacesContext.getCurrentInstance().addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_WARN,
"Remove Player :: Player Info: ID :: "+ p.getPlayerId() + " :: Name :: "+p.getPlayerName(),""));
}
public void phaseListener(PhaseEvent e){
List<FacesMessage> messages = e.getFacesContext().getMessageList();
System.out.println(messages.size());
}
}
3. The Converter
PlayerConveter.java
package net.javabeat.primefaces.converter;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.RequestScoped;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.Converter;
import javax.faces.convert.FacesConverter;
import net.javabeat.primefaces.data.Player;
import net.javabeat.primefaces.util.PlayerDataSource;
//To be considered by the JavaServer Faces As Managed Bean
// & Make the converter Eligible for use @ManagedProperty
@ManagedBean
@RequestScoped
@FacesConverter
public class PlayerConverter implements Converter{
@ManagedProperty(value="#{playerDataSource}")
private PlayerDataSource ds;
public PlayerDataSource getDs() {
return ds;
}
public void setDs(PlayerDataSource ds) {
this.ds = ds;
}
@Override
public Object getAsObject(FacesContext context, UIComponent component,String value) {
for(Player p : ds.getPlayers()){
if(p.getPlayerId().equals(value)){
return p;
}
}
return null;
}
@Override
public String getAsString(FacesContext context, UIComponent component,Object value) {
if(value instanceof Player){
Player player = (Player)value;
return player.getPlayerId();
}
return "";
}
}
4. The Datasource
PlayerDataSource
package net.javabeat.primefaces.util;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import net.javabeat.primefaces.data.Player;
@ManagedBean
@SessionScoped
public class PlayerDataSource {
public List<Player> players = new ArrayList<Player>();
public PlayerDataSource(){
// Assumed Player
Player player = new Player();
player.setPlayerId("1");
player.setPlayerName("Anderias Muller");
player.setPlayerPosition("CF");
player.setPlayerAge("24");
// Add Player
players.add(player);
// Assumed Player
player = new Player();
player.setPlayerId("2");
player.setPlayerName("Olaf Thon");
player.setPlayerPosition("CM");
player.setPlayerAge("29");
// Add Player
players.add(player);
// Assumed Player
player = new Player();
player.setPlayerId("3");
player.setPlayerName("Oliver Khan");
player.setPlayerPosition("GK");
player.setPlayerAge("31");
// Add Player
players.add(player);
}
public List<Player> getPlayers() {
return players;
}
public void setPlayers(List<Player> players) {
this.players = players;
}
public List<Player> queryByName(String name){
// Assumed search using the startsWith
List<Player> queried = new ArrayList<Player>();
for(Player player: this.players){
if(player.getPlayerName().startsWith(name)){
queried.add(player);
}
}
return queried;
}
}
5. Player Data Type (Pojo)
Player.java
package net.javabeat.primefaces.data;
public class Player {
private String playerId;
private String playerName;
private String playerPosition;
private String playerAge;
public String getPlayerId() {
return playerId;
}
public void setPlayerId(String playerId) {
this.playerId = playerId;
}
public String getPlayerName() {
return playerName;
}
public void setPlayerName(String playerName) {
this.playerName = playerName;
}
public String getPlayerPosition() {
return playerPosition;
}
public void setPlayerPosition(String playerPosition) {
this.playerPosition = playerPosition;
}
public String getPlayerAge() {
return playerAge;
}
public void setPlayerAge(String playerAge) {
this.playerAge = playerAge;
}
public boolean equals(Object obj){
if(obj instanceof Player){
Player player = (Player)obj;
if(this.playerId.equals(player.getPlayerId())){
return true;
}
}
return false;
}
public int hashCode(){
return this.playerId.hashCode();
}
}
6. AutoComplete Events
Your listener (if defined) will be invoked with org.primefaces.event.Select instance that contains a reference to the selected item and org.primefaces.event.UnselectEvent instance that contains a reference to the unselected item once you’ve selected and removed items, respectively. Note that autoComplete also supports events inherited from regular input text such as blur, focus, mouseover in addition to itemSelect.
7. Primefaces AutoComplete + AjaxBehavior Demo
[wpdm_file id=68]
How To Preload Images In JavaScript