Why is partial-rendering failing in this particular case? - ajax

I am using Mojarra 2.2.
Here the snippet:
<h:head>
<title></title>
</h:head>
<h:body>
<h:form id="playersFormId">
<h:dataTable id="playersTableId"
value="#{ajaxBean.myMap.entrySet()}" var="t">
<h:column>
<f:facet name="header">
Delete
</f:facet>
<h:commandLink id="commandDeleteId"
immediate="true"
action="#{ajaxBean.deletePlayerAction(t.key)}">
<f:ajax render=":playersFormId:playersTableId"/>
<h:graphicImage value="/resources/default/imgs/delete.png"/>
</h:commandLink>
</h:column>
<h:column>
<f:facet name="header">
Nr
</f:facet>
#{t.key}
</h:column>
<h:column>
<f:facet name="header">
Name
</f:facet>
#{t.value}
</h:column>
</h:dataTable>
</h:form>
</h:body>
with
#Named
#ViewScoped
public class AjaxBean implements Serializable {
private Map<Integer, String> myMap = new HashMap<>();
#PostConstruct
public void init() {
myMap.put(1, "Nadal Rafael");
myMap.put(2, "Federer Roger");
myMap.put(3, "Ferer David");
myMap.put(4, "Murray Andy");
myMap.put(5, "Djokovic Novak");
myMap.put(6, "Berdych Tomas");
myMap.put(7, "Haas Tommy");
myMap.put(8, "Isner John");
myMap.put(9, "Fognini Fabio");
myMap.put(10, "Robredo Tommy");
}
public Map<Integer, String> getMyMap() {
return myMap;
}
public void setMyMap(Map<Integer, String> myMap) {
this.myMap = myMap;
}
public void deletePlayerAction(String nr) {
FacesContext facesContext = FacesContext.getCurrentInstance();
ExternalContext externalContext = facesContext.getExternalContext();
Map<String, String> headers = externalContext.getRequestHeaderMap();
//determination method 1
PartialViewContext partialViewContext =
facesContext.getPartialViewContext();
if (partialViewContext != null) {
if (partialViewContext.isAjaxRequest()) {
System.out.println("THIS IS AN AJAX REQUEST (DETERMINATION 1) ...");
} else {
System.out.println("THIS IS A NON-AJAX REQUEST(DETERMINATION 1)...");
}
}
System.out.println("nr: "+nr);
if(nr!=null){
myMap.remove(Integer.valueOf(nr));
}
}
}
I see that when i click on the image link, the server-side action method is getting c/d and the record is removed from the map.
I have specified that the datatable needs to be refreshed, but it doesn't get so.
Where am I getting it wrong?
When I click on the first record, under Network Tab, I see-
& under Console Tab-

Related

Change value of checkbox using ajax in JSF

I try to solve the following problem: i have a group of h:selectBooleanCheckbox that generates using ui:repeat:
<h:form>
<ui:repeat value="#{uiCheckboxList.list}" var="boxElement" varStatus="i">
<h:selectBooleanCheckbox id="a">
<f:attribute name="value" value="#{boxElement.enabled}"/>
</h:selectBooleanCheckbox>
<h:outputLabel value="#{boxElement.val}" for="a"/>
</ui:repeat>
</h:form>
Values and label's text stored in array list and controls by servlet:
#ManagedBean(name="uiCheckboxList")
#ApplicationScoped
public class CheckBoxListBean implements Serializable {
private ArrayList<BoxTuple> list;
// BoxTyple is class with 2 fields - val (double) and enabled (boolean)
public CheckBoxListBean() {
list = new ArrayList<>();
for(double i = -2.0; i <= 2.0; i += 0.5) {
list.add(new BoxTuple(i, false));
}
// Set first element to true
list.get(0).setEnabled(true);
}
public ArrayList<BoxTuple> getList() {
return list;
}
public void setList(ArrayList<BoxTuple> list) {
this.list = list;
}
And my problem is this: when you click on one of the h:selectBooleanCheckbox server asynchronously sent request with information about the changed box, and then change the values of the another boxes without reloading page. In other words, I need to get the behavior of radio boxes. Maybe it sounds silly, but I need to solve this problem. How can i implement this?
You can do something like this:
<h:form id="form">
<ui:repeat value="#{uiCheckboxList.list}" var="boxElement"
varStatus="i">
<h:selectBooleanCheckbox id="a">
<f:attribute name="value" value="#{boxElement.enabled}" />
<f:ajax render="form"
listener="#{uiCheckboxList.listen(boxElement)}" />
</h:selectBooleanCheckbox>
<h:outputLabel value="#{boxElement.val}" for="a" />
</ui:repeat>
</h:form>
(get rid of the varStatus if you don't use it)
public void listen(BoxTuple tuple) {
if (tuple.enabled)
for (BoxTuple t : list)
if (!t.equals(tuple))
t.setEnabled(false);
}

Table disappears after cell edit in primefaces (also data not saved)

I have an input field and a table on page. Whenever a number in a field changes (ajax listener to change event) - I want number of rows to change accordingly.
I pointed the table to an Arraylist in a Backing bean, and play with its size.
But then when I edit a value in the table - and press enter, the table disappears, and reappears only when I change field value again.
As a bonus, in debug mode, I see that backing arraylist always have empty values.
Here goes the Bean code:
#ManagedBean(name = "bean")
#ViewScoped
public class TestBean {
private List<String> hostnames = new ArrayList<String>();
private int copiesQuantityJustCopy;
public int getCopiesQuantityJustCopy() {
return copiesQuantityJustCopy;
}
public void setCopiesQuantityJustCopy(int copiesQuantityJustCopy) {
this.copiesQuantityJustCopy = copiesQuantityJustCopy;
}
public List<String> getHostnames() {
return hostnames;
}
public void setHostnames(List<String> hostnames) {
this.hostnames = hostnames;
}
public void onUpdateCount() {
int hostnamesCount = hostnames.size();
System.out.println("delta = " + hostnamesCount + " - " + copiesQuantityJustCopy);
int delta = hostnamesCount - copiesQuantityJustCopy;
if (delta > 0)
for (int i = 1; i < delta; i++)
hostnames.remove(delta);
if (delta < 0)
for (int i = 0; i < -delta; i++)
hostnames.add("");
}
}
and the view code:
<h:form id="form1">
<p:inputMask mask="9?99" maxlength="3" placeHolder=" " value="#{bean.copiesQuantityJustCopy}">
<p:ajax event="change" listener="#{bean.onUpdateCount()}" update=":form1:hostnamesTable" />
</p:inputMask>
<p:outputPanel id="hostnamesTable" rendered="true">
<p:dataTable value="#{bean.hostnames}" var="hostname"
id="hostnames" editable="true" editMode="cell">
<p:ajax event="cellEdit" update=":form1:hostnamesTable" process="#this" />
<p:column>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{hostname}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{hostname}" style="width:96%" />
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
</p:outputPanel>
</h:form>
I think my answer won't help #Anton, but it may be helpful to another "stackers" facing same problem.
My problem is similar (dataTable dissapears when cellEdit event is completed). In my case the cause was the table update performed by ajax. Since I realy don't need table update after listener firied I simply removed update attribute and now everything works good to me.

JSF submitButton that renders on datatable

This is my JSF(2.2) page :
<h:form>
<p>
Hiker-name
</p>
<p>
<h:selectOneMenu id="smenu">
<f:ajax render="hikerActivities"/>
<c:forEach items="#{hikerPresenter.hikers}" var="hiker">
<f:selectItem itemValue="#{hiker.hikerId}" itemLabel="#{hiker.hikerName}"/>
</c:forEach>
</h:selectOneMenu>
<h:commandButton id="submitHiker" value="Submit" action="#{hikerPresenter.getHikerActivities(hiker.hikerId)}">
<f:ajax execute="smenu" render="hikerActivities"/>
</h:commandButton>
</p>
<p>
<h:dataTable id="hikerActivities" var="hikerActivity" border="1">
<h:column>
<f:facet name="header" >Trip-date</f:facet>
#{hikerActivity.tripDate}
</h:column>
<h:column>
<f:facet name="header">Trip-fare</f:facet>
#{hikerActivity.tripFare}
</h:column>
<h:column>
<f:facet name="header">Trip-duration</f:facet>
#{hikerActivity.tripDuration}
</h:column>
</h:dataTable>
</p>
I want that with a click on the command button, my MBean's method get called with the hikerId from the selected item and gets render on the datatable.
this is my MBean :
#ManagedBean
#RequestScoped
public class HikerPresenter {
#EJB
private HikerControllerLocal hikerController;
public HikerPresenter() {
}
public List<HikerAccessDTO> getHikers(){
return hikerController.getHikers();
}
public List<HikerActivityDTO> getHikerActivities(long hikerId){
System.out.println("Get Hiker Activities Called");
List<HikerActivityDTO> l = new ArrayList();
l.add(new HikerActivityDTO(new Date(1417150800000L), "Montréal", "Valleyfield", "Amine", 22, 45));
l.add(new HikerActivityDTO(new Date(1417160800000L), "Montréal", "Québec", "Farida", 33, 44));
l.add(new HikerActivityDTO(new Date(1417170800000L), "Montréal", "Alloha", "dsdsd", 12, 2332));
return l;
}
}
I suppose that I call the MBean method getHikerActivities on the wrong place because it doesn't even System.out.
What am-I doing wrong?
1:
use f:selectItems instead of f:selectItem
2:
your table missed the value attribute like value="hikerPresenter.hikers"
3:
You must set the value attribute of h:selectOneMenu to set hikerId into the bean, so its not necessary to send it as parameter in the method getHikerActivities

Problems with ajax in jsf updating an output text field

I'm new to JSF and in class we should just set up a little "Pizza-Service" with logins etc. On the Page where i want to prepare my Order as a user I've a data table (primeface data table) with 4 columns. The last one is for the number of pizza of the type in the current cell.
What I want: If I am typing in a Number i want to set up a current Order (works fine so far with ajax) in the same moment i just want to show the user the current price. This is the little thing that is not working.
When I am using the tag there is just nothing happening and if I am taking the tag I'm getting this mistake:
<f:ajax> contains an unknown id 'ausgabe' - cannot locate it in the context of the component menge
What I thought was take the ajax tag set up a function (take the current order) and render an output text where the calculated price is shown directly. I called those function in german so bestellungAufnehmen = takeOrder and preisBerechnen = calculatePrice.
Thanks if someone could help me!
Here is the xhtml:
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h:form>
<p:dataTable id="table" var="pizza" value="#{model.getPizzen()}">
<p:column headerText="Nr">
<h:outputText value="#{pizza.nr}"/>
</p:column>
<p:column headerText="Artikel">
<h:outputText value="#{pizza.name}"/>
</p:column>
<p:column headerText="Preis">
<h:outputText value="#{pizza.preis}"/>
</p:column>
<p:column headerText ="Menge">
<h:inputText id="menge" value="#{bestellung.anzahl}">
<f:ajax event="keyup" render="ausgabe" listener="#{bestellung.bestellungAufnehmen(pizza)}"/>
</h:inputText>
</p:column>
</p:dataTable>
<h:outputLabel value="Zu Zahlen: "/>
<h:outputText id="ausgabe" value="#{bestellung.preisBerechnen()} €"/>
</h:form>
</h:body>
and here is the the Bean with those functions.
#Named
#SessionScoped
public class Bestellung implements Serializable {
private static int bstzaehler=0;
private int bstnr;
private Map<String,Bestellposten> posten;
private int anzahl;
public Bestellung(){
this.bstnr=++bstzaehler;
this.posten = new HashMap<>();
}
/**
* #return the bstnr
*/
public int getBstnr() {
return bstnr;
}
/**
* #param bstnr the bstnr to set
*/
public void setBstnr(int bstnr) {
this.bstnr = bstnr;
}
public void bestellungAufnehmen(Pizza pizza){
if(this.posten.containsKey(pizza.getName()) == false){
Bestellposten b = new Bestellposten(this.getAnzahl(), pizza);
this.posten.put(pizza.getName(),b);
} else {
if(this.getAnzahl() > 0 ){
Bestellposten tmp = this.posten.get(pizza.getName());
tmp.setMenge(this.getAnzahl());
} else {
this.posten.remove(pizza.getName());
}
}
System.out.println("groesse: "+posten.size());
System.out.println("akt preis: "+this.preisBerechnen());
}
/**
* #return the anzahl
*/
public int getAnzahl() {
return anzahl;
}
/**
* #param anzahl the anzahl to set
*/
public void setAnzahl(int anzahl) {
this.anzahl = anzahl;
}
public double preisBerechnen(){
double sum = 0.0;
for(String key : this.posten.keySet()){
Pizza tmp = this.posten.get(key).getPizza();
sum += tmp.getPreis() * this.posten.get(key).getMenge();
}
return sum;
}
}
Try giving the full qualified id for the component:
<h:form id="frmPizza">
<p:dataTable id="table" var="pizza" value="#{model.getPizzen()}">
<p:column headerText="Nr">
<h:outputText value="#{pizza.nr}"/>
</p:column>
<p:column headerText="Artikel">
<h:outputText value="#{pizza.name}"/>
</p:column>
<p:column headerText="Preis">
<h:outputText value="#{pizza.preis}"/>
</p:column>
<p:column headerText ="Menge">
<h:inputText id="menge" value="#{bestellung.anzahl}">
<f:ajax event="keyup" render=":frmPizza:ausgabe" listener="#{bestellung.bestellungAufnehmen(pizza)}"/>
</h:inputText>
</p:column>
</p:dataTable>
<h:outputLabel value="Zu Zahlen: "/>
<h:outputText id="ausgabe" value="#{bestellung.preisBerechnen()} €"/>
</h:form>
I think, you should use update attribute to update that outputText, like update=":FormId:ausgabe"
<f:ajax event="keyup"
render=":frmPizza:ausgabe"
listener="#{bestellung.bestellungAufnehmen(pizza)}"
update=":frmPizza:ausgabe" />
The solution of luiggi worked but i couldnt answer directly because of my "low-level" here.
Iam not on my computer right now but isnt "update" an attribute of p:ajax and not of f:ajax and is the same as render? but i will try it aswell later on.
thx!

prime faces after submit ajax doesn't update [duplicate]

This question already has answers here:
How can I populate a text field using PrimeFaces AJAX after validation errors occur?
(3 answers)
Closed 3 years ago.
Using PF 3.2
I faced this problem
if I submit a form and their is a required field, validation done and required messages appeared. the problem is after that if I changed the combo value that -by ajax- changes the inputtext the value doesn't change, however the listener called!
xhtml
<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>
<title>Prime Test</title>
</h:head>
<h:body style="background: #F6F6F6;">
<h:form id="idAjaxFormTest">
<f:view>
<h1> <h:outputText value="after submit ajax problem" /></h1>
<p:messages showSummary="true" autoUpdate="true" />
<p:panelGrid columns="2">
<h:outputText value="Names" />
<p:selectOneMenu value="#{ajaxTest.name}">
<f:selectItems value="#{ajaxTest.names}" var="varName"
itemLabel="#{varName}" itemValue="#{varName}">
</f:selectItems>
<p:ajax listener="#{ajaxTest.listen}" update="idXname" />
</p:selectOneMenu>
<h:outputText value="Xname" />
<p:inputText value="#{ajaxTest.xname}" id="idXname"/>
<h:outputText value="Xuser" />
<p:inputText required="true" transient="true" value="#{ajaxTest.xuser}" label="xUser" />
</p:panelGrid>
<p:commandButton value="Submit" action="#{ajaxTest.doAction}" />
</f:view>
</h:form>
</h:body>
Bean
package com.actions;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
#ManagedBean(name = "ajaxTest")
#ViewScoped
public class AjaxTestBean implements Serializable{
private List<String> names;
private String name;
private String xname;
private String xuser;
public AjaxTestBean() {
names = new ArrayList<String>();
names.add("ahmed");
names.add("mohamed");
names.add("mahmoud");
names.add("ayman");
names.add("walid");
names.add("khalid");
}
public void listen(){
xname = "QQ "+ name;
System.out.println("Listener "+ xname);
}
public void doAction(){
System.out.println("Action Done: "+ name);
}
public List<String> getNames() {
return names;
}
public void setNames(List<String> names) {
this.names = names;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getXname() {
return xname;
}
public void setXname(String xname) {
this.xname = xname;
}
public String getXuser() {
return xuser;
}
public void setXuser(String xuser) {
this.xuser = xuser;
}
}
Looks like you have run into this problem:
How can I populate a text field using PrimeFaces AJAX after validation errors occur?
Adding the following to faces-config.xml together with OmniFaces library made your select-one-menu update the inputField correctly
<lifecycle>
<phase-listener>org.omnifaces.eventlistener.ResetInputAjaxActionListener</phase-listener>
</lifecycle>
If you dont want to do it for all your components, OmniFaces has a showcase how to do it per component: http://showcase.omnifaces.org/eventlisteners/ResetInputAjaxActionListener

Resources