PrimeFaces Ajax call only once through the application - ajax

Hi i am developping a jsf spring application and i am using primefaces library
what i found is that ajax calls
<p:ajax listener="#{etatTest.onClientChange}" update="pret"/>
<p:ajax listener="#{etatTest.onEntiteChange}" update="clients"/>
<are not firing at all , i tried to debug but nothing
this is my bean
#Named
#ViewScoped
public class EtatTest implements Serializable{
#Autowired
private IEntiteManager entiteManager;
private Integer idEntite;
private List<Entites> ents;
private Entites entite;
#Autowired
private ICrmClientManager clientManager;
private Crmclients crmClient;
private List<Crmclients> crmClients;
#Autowired
private IBqPretManager bqpretManager;
private Bqpret pret;
private List<Bqpret> listPret;
#PostConstruct
public void init() {
ents =entiteManager.AllEntites("03052021105404", 1);
}
public void onEntiteChange()
{
if(entite !=null && !entite.equals(null)) {
crmClients=clientManager.getByEntite(entite);
}else {
crmClients=new ArrayList<Crmclients>();
}
}
public void onClientChange() {
if(crmClient==null && !crmClient.equals(null)) {
listPret = bqpretManager.listBqpret(null,null,null ,crmClient.getId(),null,null, null,null,null, null);
}else {
listPret=new ArrayList<Bqpret>();
}
}
//getters and setters
<h:form>
<p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true"/>
<p:panel header="Select a Location" style="margin-bottom:10px;">
<h:panelGrid columns="2" cellpadding="5">
<p:outputLabel for="entite" value="Entity: "/>
<p:selectOneMenu id="entite" value="#{etatTest.entite}" style="width:150px">
<p:ajax listener="#{etatTest.onEntiteChange}" update="clients"/>
<f:selectItem itemLabel="Select Entite" itemValue="" noSelectionOption="true"/>
<f:selectItems value="#{etatTest.ents}" var="p" itemLabel="#{p.libelle}" itemValue="#{p.id}"/>
</p:selectOneMenu>
<p:outputLabel for="clients" value="Client: "/>
<p:selectOneMenu id="clients" value="#{etatTest.crmClient}" style="width:150px">
<p:ajax listener="#{etatTest.onClientChange}" update="pret"/>
<f:selectItem itemLabel="Select client" itemValue="" noSelectionOption="true"/>
<f:selectItems value="#{etatTest.crmClients}" var="p" itemLabel="#{p.libelle}" itemValue="#{p.id}"/>
</p:selectOneMenu>
<p:outputLabel for="pret" value="Pret: "/>
<p:selectOneMenu id="pret" value="#{etatTest.pret}" style="width:150px">
<f:selectItem itemLabel="Select pret" itemValue="" noSelectionOption="true"/>
<f:selectItems value="#{etatTest.listPret}" var="p" itemLabel="#{p.libelle}" itemValue="#{p.id}"/>
</p:selectOneMenu>
</h:panelGrid>
</p:panel>
</h:form>

Related

It is possible to have two lisneter using tag <p:ajax .... /> in a form ? (Primefaces and JSF )

I have a form that consists of 3 dropdown and when i chose an item from the first dropdown the listener retrieve the list of the 2nd dropdown perfectly. But when i chose an item from the 2nd dropdown listener does not work and does not even mention the method of my bean.
Here is my form
<p:outputLabel for="structure" value="Structure"/>
<h:panelGroup >
<p:selectOneMenu id="structure" value="#{etpBean.idt_structure}" style="margin-bottom:10px;" required="true">
<p:ajax listener="#{etpBean.onRessourceChange}" update="affectation" />
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems value="#{etpBean.structures}" var="structure" itemValue="#{structure.idt_structure}" itemLabel="#{structure.nom}" />
</p:selectOneMenu>
</h:panelGroup>
<p:outputLabel for="affectation" value="les ressources affectee"/>
<h:panelGroup >
<p:selectOneMenu id="affectation" value="#{etpBean.idt_affectation}" style="margin-bottom:10px;" required="true">
<p:ajax listener="#{etpBean.onAffectationChange}" update="activite" />
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems value="#{etpBean.affectations}" var="affectation" itemValue="#{affectation.idt_affectation}" itemLabel="#{affectation.ressource.nom}" />
</p:selectOneMenu>
</h:panelGroup>
<p:outputLabel for="activite" value="Activite"/>
<h:panelGroup >
<p:selectOneMenu id="activite" value="#{etpBean.idt_parent}" style="margin-bottom:10px;" required="true">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems value="#{etpBean.activites}" var="activite" itemValue="#{activite.idt_parent}" itemLabel="#{activite.nom}" />
</p:selectOneMenu>
</h:panelGroup>
<p:outputLabel for="pes" value="charge effectué"/>
<h:panelGroup>
<p:inputText id="pes" value="#{etpBean.etp}" />
<p:slider for="pes" step="1" />
</h:panelGroup>
</p:panelGrid>
</p:panel>
</h:form>
And Here is my bean
#ManagedBean(name="etpBean")
#ViewScoped
public class EquivalentTempPleinBean implements Serializable {
/**
*
*/
private static final long serialVersionUID = 1L;
private Double etp;
private Date dateDebut;
private Date dateFin;
private Long idt_affectation;
private Long idt_parent;
private Long idt_ressource;
private Long idt_structure;
private Collection<Ressource> ressources;
private Collection<Structure> structures;
private Collection<Activite> activites;
private Collection<Affectation> affectations;
private ETP equivalentTempPlein = new ETP();
private Ressource ressource = new Ressource();
private Affectation affectation;
private Activite activite = new Activite();
private Structure structure;
#ManagedProperty(value = "#{ressourceService}")
private IRessourceService ressourceService;
#ManagedProperty(value = "#{structureService}")
private IStructureService structureService;
#ManagedProperty(value = "#{activiteService}")
private IActiviteService activiteService;
#ManagedProperty(value = "#{affectationService}")
private IAffectationService affectationService;
public EquivalentTempPleinBean() {
super();
}
#PostConstruct
public void init()
{
structures=structureService.listStructures();
}
// work perfeclty
public void onRessourceChange(){
System.out.println("On ressource Change");
structure =structureService.findStructureById(idt_structure);
affectations=affectationService.affectationByStructure(idt_structure);
//ressources=ressourceService.ressourceOnAffectation(idt_structure);
}
//dont work
public void onAffectationChange(){
System.out.println("##########################################################");
affectation=(Affectation) affectationService.findAffectationById(idt_affectation);
activites=activiteService.activiteOnAffectation(idt_structure,affectation.getDateDebut(),affectation.getDateFin());
}
//Getters and setters
}

OneMenu & 2 ajax inside won't work

I'm facing a huge problem since 2 weeks.
I tested 2 ajax method one by one and they work. But when I want to have both in a oneMenu, the dropdown supposed to update the third oneMenu of the page does'nt work.
<h:body>
<h:form>
<p:growl id="growl" showDetail="true" />
<p:outputLabel value="Sélectionner une section " for="sectionBox"/>
<p:selectOneMenu id="sectionBox"
value="#{evaluationViewController.currentSection}"
converter="sectionConverter"
var="c"
filter="true"
filterMatchMode="startsWith"
effect="fade"
>
<p:ajax listener="#{evaluationViewController.onSectionSelected}" update="ue,ueO,growl"/>
<f:selectItem itemLabel="Sélectionnez uen section" itemValue="" noSelectionOption="true"/>
<f:selectItems value="#{evaluationViewController.currentSections}"
var="currentSection"
itemLabel="#{currentSection.name}"
itemValue="#{currentSection}"
/>
<p:column>
<h:outputText value="#{c.name}"/>
</p:column>
</p:selectOneMenu>
<p:outputLabel value="Sélectionner une UE " for="ue"/>
<p:selectOneMenu id="ue"
value="#{evaluationViewController.ue}"
converter="ueConverter"
var="u"
filter="true"
filterMatchMode="startsWith"
>
<p:ajax listener="#{evaluationViewController.onUeSelected}" update="ueO,growl"/>
<p:ajax event="change" update="capacities" listener="#{evaluationViewController.listenerCapacitiesUpdate}"/>
<f:selectItem itemLabel="Sélectionnez une UE" itemValue="" noSelectionOption="true"/>
<f:selectItems value="#{evaluationViewController.ues}"
var="ues"
itemLabel="#{ues.name}"
itemValue="#{ues}"
/>
<p:column>
<h:outputText value="#{u.name}"/>
</p:column>
</p:selectOneMenu>
<p:outputLabel value="Sélectionner l'UE enseignée" for="ueO"/>
<p:selectOneMenu id="ueO"
value="#{evaluationViewController.organizedUe}"
converter="organizedUeConverter"
var="o"
filter="true"
filterMatchMode="startsWith"
>
<f:selectItem itemLabel="Sélectionnez une année" itemValue="" noSelectionOption="true"/>
<f:selectItems
value="#{evaluationViewController.organizedUes}"
var="organizedUes"
itemLabel="#{organizedUes.name}"
itemValue="#{organizedUes}"
/>
<p:column>
<h:outputText value="#{o.name}"/>
</p:column>
<p:column>
<h:outputText value="#{o.level.name}"/>
</p:column>
</p:selectOneMenu>
<p:separator/>
<p:separator/>
<p:dataTable id="capacities"
var="cap"
value="#{evaluationViewController.capacities}"
editable="true"
editMode="cell"
widgetVar="cellCap"
>
<f:facet name ="header">
Capacitées
</f:facet>
<p:ajax event="cellEdit"
listener="#{evaluationViewController.onCellEdit}"
update="#this"/>
<p:column headerText="Dénomination">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{cap.name}"/></f:facet>
<f:facet name="input"><p:inputText value="#{cap.name}" style="width: 30%" label="Dénomination"/></f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Description">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{cap.description}"/></f:facet>
<f:facet name="input"><h:inputText value="#{cap.description}" style="width: 90%" label="Description"/></f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Réussite obligatoire">
<p:selectBooleanCheckbox value="#{cap.isThresholdOfSuccess}" style="alignment-adjust: central"/>
</p:column>
</p:dataTable>
<p:separator/>
</h:form>
</h:body>
I followed the primefaces demo as well for the bean :
public class EvaluationViewController implements Serializable {
#EJB
private SectionFacade ejbSectionFacade;
private List<Section> currentSections;
private Section currentSection;
#EJB
private UeFacade ejbUeFacade;
private List<Ue> ues;
private Ue ue;
#EJB
private OrganizedUeFacade ejbOrganizedUeFacade;
private List<OrganizedUe> organizedUes;
private OrganizedUe organizedUe;
#EJB
private CapacityFacade ejbCapacity;
private List<Capacity> capacities;
private Capacity capacity;
#PostConstruct
public void init() {
currentSections = ejbSectionFacade.findAll();
ues = new ArrayList<>();
organizedUes = new ArrayList<>();
capacities = new ArrayList<>();
}
public void onSectionSelected() {
if (currentSection != null && !currentSection.getName().equals("")) {
ues = ejbUeFacade.findBySection(currentSection);
ue = null;
capacity = null;
FacesMessage facesMessage = new FacesMessage("Sélection", currentSection.getName());
FacesContext.getCurrentInstance().addMessage(null, facesMessage);
} else {
ues = null;
}
}
public void onUeSelected() {
if ((currentSection != null && !currentSection.getName().equals(""))
&& (ue != null && !ue.getName().equals(""))) {
organizedUes = ejbOrganizedUeFacade.findByUe(ue);
capacities = ejbCapacity.findByUe(ue);
capacity = null;
FacesMessage facesMessage = new FacesMessage("Sélection de l'UE : ", ue.getName());
FacesContext.getCurrentInstance().addMessage(null, facesMessage);
} else {
organizedUes = null;
}
}
public void listenerCapacitiesUpdate() {
capacities = ejbCapacity.findByUe(ue);
}
The DataTable is updated and rendered but not the last oneMenu. I really don't get it. I would be very gratefull for the answer.
There are two things at hand here:
If you do not provide an explict event, then a default one is taken
You cannot add two ajax tags to the same component listening to the same event
So if in this case the default ajax event of the p:selectOneMenu is change, only the second one will be processed. Adding an explicit event other than change to the first ajax handler will make it work
Off-topic but important things you should normally do debugging issues like this:
Find the differences between the two and see and try to make them as identical as possible
See if the order plays a role by switching them
See if using a different component makes it work

Primefaces 5.0 and Ajax. Listener method not being called

I have multiple dropdown lists using Primefaces 5.0. As you select an option in the first drop down list (in this case a country) then it should grab the cities in that country and populate the city drop down list. However, I have code to populate my cities drop down list from my database using the country but the method is never called.
My Region.xhtml:
<h:form>
<p:tab title="Region Selection" rendered="true">
<p:panel header="Region Information">
<h:panelGrid columns="2" columnClasses="label, value">
<h:outputText value="Country" />
<p:selectOneMenu id="country" value="#{rosterBean.selectedCountry}">
<p:ajax listener="#{rosterBean.onCountryChange()}" update="state" />
<f:selectItem itemLabel="Select Country" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{rosterBean.countries}" />
</p:selectOneMenu>
<h:outputText value="State/ Province" />
<p:selectOneMenu id="state" value="#{rosterBean.selectedState}">
<p:ajax listener="#{rosterBean.onStateChange}" />
<f:selectItem itemLabel="Select State" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{rosterBean.states}" />
</p:selectOneMenu>
<h:outputText value="City" />
<p:selectOneMenu id="city" filter="true" filterMatchMode="contains" >
<f:selectItem itemLabel="Johannesburg" itemValue="0" noSelectionOption="true" />
<f:selectItem itemLabel="Pretoria" itemValue="1" noSelectionOption="true" />
</p:selectOneMenu>
</h:panelGrid>
</p:panel>
</p:tab>
</h:form>
My Bean:
#ViewScoped
#ManagedBean
public class RosterBean implements Serializable {
public void onCountryChange() {
System.out.println("Updating State");
}
}
I have got all my getters and setters, but that system.out is never called. So irrespective if it is going to call the right cities in that country it never gets there.
Your input elements and p:ajax need to be nested within an h:form, otherwise no data is submitted on POST. actionListeners sometimes require access to the submitted value (either through the method parameters or an ActionEvent), so it appears listeners will not be called if the submitted value is not available.
Hint: You can check your browser's developer tools to see what is actually submitted.
See also
JSF: Execute values of multiple forms
How to execute another <h:form> using <f:ajax>?
JSF - actionListener tag calls method which doesn't take an ActionEvent parameter
You seem to still be having some trouble, so here is a complete example, slightly modified from your own:
<?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"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
</h:head>
<h:body>
<h:form>
<p:panel header="Region Information">
<h:panelGrid columns="2" columnClasses="label, value">
<h:outputText value="Country" />
<p:selectOneMenu id="country" value="#{rosterBean.selectedCountry}" >
<p:ajax listener="#{rosterBean.onCountryChange()}" update="state" />
<f:selectItem itemLabel="Select Country" itemValue="" noSelectionOption="true" />
<f:selectItem itemLabel="Country 1" itemValue="1" />
</p:selectOneMenu>
<h:outputText value="State/ Province" />
<p:selectOneMenu id="state" value="#{rosterBean.selectedState}" >
<p:ajax listener="#{rosterBean.onCountryChange}" />
<f:selectItem itemLabel="Select State" itemValue="" noSelectionOption="true" />
<f:selectItem itemLabel="State1 1" itemValue="1" />
</p:selectOneMenu>
</h:panelGrid>
</p:panel>
</h:form>
<p:commandButton value="Next"/>
</h:body>
</html>
(Note that I deleted the class attribute from the commandButton. class is not a valid attribute on commandButton.)
RosterBean.java
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
#ManagedBean
#ViewScoped
public class RosterBean {
public String selectedCountry;
public String selectedState;
public String getSelectedCountry() {
return selectedCountry;
}
public void setSelectedCountry(String selectedCountry) {
this.selectedCountry = selectedCountry;
}
public String getSelectedState() {
return selectedState;
}
public void setSelectedState(String selectedState) {
this.selectedState = selectedState;
}
public void onCountryChange() {
System.out.println("Updating State");
}
}

primefaces cascade selectonemenu

I have 3 dropdowns, the second has to be loaded based on the selected option of the first. And the third based on the selected option of the second.
This is the page:
<h:panelGrid columns="2" cellpadding="5">
<p:outputLabel value="Empresa:" for="selectCompany" />
<p:selectOneMenu id="selectCompany" value="#{dropdownBean.company}"
converter="entityConverter" effect="fade" effectSpeed="200"
var="company">
<p:ajax process="#this" event="change"
update="selectBranch, selectVendor" />
<f:selectItems value="#{dropdownBean.companies}" var="companyItem"
itemLabel="#{companyItem.corporateName}" itemValue="#{companyItem}" />
<p:column>
<h:outputText value="#{company.corporateName}" />
</p:column>
</p:selectOneMenu>
</h:panelGrid>
<h:panelGrid columns="2" cellpadding="5">
<p:outputLabel value="Surcursal:" for="#selectBranch" />
<p:selectOneMenu id="#selectBranch" value="#{dropdownBean.branch}"
converter="entityConverter" effect="fade" effectSpeed="200"
var="branch">
<p:ajax process="#this" event="change" update="#selectVendor" />
<f:selectItem itemLabel="SELECCIONE SUCURSAL" itemValue=""
noSelectionOption="true" />
<f:selectItems value="#{dropdownBean.branches}" var="branchItem"
itemLabel="#{branchItem.branchName}" itemValue="#{branchItem}" />
<p:column>
<h:outputText value="#{branch.branchName}" />
</p:column>
</p:selectOneMenu>
</h:panelGrid>
<h:panelGrid columns="2" cellpadding="5">
<p:outputLabel value="Vendedor: " for="#selectVendor" />
<p:selectOneMenu id="#selectVendor" value="#{dropdownBean.vendor}"
converter="entityConverter" effect="fade" effectSpeed="200"
var="vendor">
<f:selectItem itemLabel="SELECCIONE VENDEDOR" itemValue=""
noSelectionOption="true" />
<f:selectItems value="#{dropdownBean.vendors}" var="vendorItem"
itemLabel="#{vendorItem.vendorName}" itemValue="#{vendorItem}" />
<p:column>
<h:outputText value="#{vendor.vendorName}" />
</p:column>
</p:selectOneMenu>
</h:panelGrid>
And the backbean:
#ManagedBean
public class DropdownBean {
#Inject
private CompanyBC companyBC;
#Inject
private BranchBC branchBC;
#Inject
private VendorBC vendorBC;
private V_Companies company;
private V_Branches branch;
private V_Vendors vendor;
private List<V_Companies> companies;
private List<V_Branches> branches;
private List<V_Vendors> vendors;
#PostConstruct
public void allCompanies() {
companies = companyBC.allCompanies();
}
public List<V_Companies> getCompanies() {
return companies;
}
public void setCompanies(List<V_Companies> companies) {
this.companies = companies;
}
public List<V_Branches> getBranches() {
if(company!=null)
branches = branchBC.allCompanyBranches(company.getCompanyId());
return branches;
}
public void setBranches(List<V_Branches> branches) {
this.branches = branches;
}
public List<V_Vendors> getVendors() {
if(company!=null && branch!=null)
vendors = vendorBC.allBranchVendors(company.getCompanyId(), branch.getBranchId());
return vendors;
}
public void setVendors(List<V_Vendors> vendors) {
this.vendors = vendors;
}
public V_Companies getCompany() {
return company;
}
public void setCompany(V_Companies company) {
this.company = company;
}
public V_Branches getBranch() {
return branch;
}
public void setBranch(V_Branches branch) {
this.branch = branch;
}
public V_Vendors getVendor() {
return vendor;
}
public void setVendor(V_Vendors vendor) {
this.vendor = vendor;
}
}
The first two dropdowns work great but the last one does not. Apparently cannot be more than one p:ajax for the same event or something like that. Any suggestions please?
adding a listener worked:
<p:ajax process="#this" listener="#{userEditMB.onBranchChange}" event="change" update="selectVendor" />
public void onBranchChange(AjaxBehaviorEvent event) {
setBranch((V_Branches) ((UIOutput) event.getSource()).getValue());
vendors = vendorBC.allBranchVendors(getBranch().getCompanyId(),
getBranch().getBranchId());
}
I tried listener before but passing the Id's as parameters. Passing AjaxBehaviorEvent and casting to the object was the answer for me. I hope helps someone
Thanks!

gmap PrimeFaces p:ajax

I am trying to update the google map of PrimeFaces with the new latitude, longitude with the help of p:ajax, but it is not working...I'm using JSF 2.0. I have used p:ajax earlier in the similar way and it worked beautifully. Any idea why this does not work? The following is the code, contForm is the id of the form.
<h:outputText value="Latitude :"/>
<h:inputText value="#{confirmBrandRegistration.newBrand.mapLatitude}" size="10">
<p:ajax event="blur" update="contForm:gMapID"/>
</h:inputText>
<h:outputText value=" Longitude :"/>
<h:inputText value="#{confirmBrandRegistration.newBrand.mapLongitude}" size="10" >
<p:ajax event="blur" update="contForm:gMapID"/>
</h:inputText>
<h:outputText value=" Marker :"/>
<h:inputText value="#{confirmBrandRegistration.newBrand.mapMarker}" size="20" >
<p:ajax event="blur" update="contForm:gMapID"
listener="#{confirmBrandRegistration.updateMarker}"/>
</h:inputText>
</h:panelGrid>
<p:outputPanel id="gMapID">
<f:view contentType="text/html">
<p:gmap center="#{confirmBrandRegistration.newBrand.mapLatitude}, #{confirmBrandRegistration.newBrand.mapLongitude}"
zoom="16" type="HYBRID" streetView="true"
model="#{confirmBrandRegistration.simpleModel}"
style="width:500px;height:400px" />
</f:view>
</p:outputPanel>
I solved it right now:)
index page:
<h:panelGroup id="pmap">
<p:inputText value="#{mapManager.address}" label="Adresa" />
<h:outputText value="#{mapManager.geo}" id="m" />
<p:commandButton value="OK" actionListener="#{mapManager.updateMapCenter(ae)}" update="pmap" />
<p:gmap center="#{mapManager.geo}"
zoom="7"
type="HYBRID"
style="width:800px;height:400px"
streetView="true"
model="#{mapManager.map}"
overlaySelectListener="#{mapBean.onMarkerSelect}"
>
<p:gmapInfoWindow>
<p:outputPanel style="text-align:center; display:block; margin:auto:">
<h:outputText value="#{mapManager.marker.title}" />
wserw
</p:outputPanel>
</p:gmapInfoWindow>
</p:gmap>
</h:panelGroup>
part of managed bean:
private MapModel map;
private Marker marker;
private String address;
private String geo="49.817491999999992, 15.4729620";
public MapManager() {
}
#PostConstruct
public void init() {
events = edao.findAll();
map = new DefaultMapModel();
for (Event event : events) {
Marker m=new Marker(new LatLng(event.getLat(), event.getLng()), event.getName());
map.addOverlay(m);
}
}
public void updateMapCenter(ActionEvent ae) {
GMapService gs=new GMapService();
LatLng geo=gs.getGeocode(address);
this.geo=geo.getLat()+","+geo.getLng();
}
hope it solved your problem.

Resources