commandButton is not executed if component was ajax updated - ajax

The following simplificated Code is working when I set ajax="false". With ajax="true" the second commandButton don't calls personPM.commitEditPerson() when pushed after was updated by Button1 or Button2.
Can someone help me whats wrong here? Because it seems to be not easy to solve, I add the whole code that it can be easily reproduced (JSF 2.2, Primefaces is 3.5, GlassFish 4.0):
<?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://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h:form id="f1">
<p:commandButton id="Button1" update=":neuePerson" value="Neue Person" action="#{testPM.setCurrentPerson()}"/>
</h:form>
<h:panelGroup id="neuePerson">
<h:form id="f2" >
<p:commandButton id="Button2" update=":neuePerson" value="Übernehmen" action="#{testPM.commitEditPerson()}"/>
</h:form>
</h:panelGroup>
</h:body>
</html>
Session Scoped Bean TestPM.java:
package at.feimas.administration.presentation;
import java.util.logging.Level;
import java.util.logging.Logger;
public class TestPM {
private String currentPerson;
private String firstName;
private static final Logger logger = Logger.getLogger(TestPM.class.getName());
public void setCurrentPerson() {
logger.log(Level.INFO, "New Person");
}
public void commitEditPerson(){
logger.log(Level.INFO, "Edit Person");
}
}

The problem is caused by a version mismatch PF 3.5 is not ready for JSF 2.2! I used PF snapshot 4.0 and it worked.
This code should show the whole problem and how to solve it with PF 3.5 and JSD 2.2, but I strongly suggest to use versions which work together!:
<h:body>
<h:form id="f1">
<p:commandButton id="Button1" update=":f2:buttonpanel2" value="New Person" actionListener="#{testPM.setFirstName}"/>
</h:form>
<h:panelGroup id="buttonpanel1">
<h:form id="f2">
<h:panelGroup id="buttonpanel2">
<h:outputText value="#{testPM.firstName}" id="firstName"/>
<p:commandButton id="Button2" update=":f2:buttonpanel2" value="Apply" actionListener="#{testPM.commitEditPerson}"/>
</h:panelGroup>
</h:form>
</h:panelGroup>
</h:body>
If the buttons use 'update=":buttonpanel1"' this leads to the behaviour I posted here in the question: As soon the update takes place, form f2 doesn't work anymore. If the buttons use 'update=":f2:buttonpanel2"' everything works as expected.

Related

Ajax listener not working with JSF2.2 inputFile

Hi my problem is somewhat similar to the following:
ajax-listener-not-working-with-inputfile
I am able to upload files using an AJAX call in my local environment and everything works as expected. However, when I deploy the war file onto Jelastic PaaS, the AJAX listener does not seem to be working.
I've tried updating to JSF2.2 on Jelastic by replacing the jar under
glassfish\modules and restarting the server, as suggested here:
JSF-working-properly-AJAX-file
But this does not seem to have fixed the problem.
I've even created a very simple test similar to the one used in the first link and I am still having no luck.
xhtml
<?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">
<h:head>
<title>JSF Test</title>
</h:head>
<h:body>
<h:form>
<h:commandButton id="btnTest" value="Command Button">
<f:ajax listener="#{submitFormBean.uploadTest()}"/> --> This works.
</h:commandButton>
</h:form>
<h:form>
<h:commandLink id="lnkTest" value="Command Link">
<f:ajax listener="#{submitFormBean.uploadTest()}"/> --> This works.
</h:commandLink>
</h:form>
<h:form enctype="multipart/form-data">
<h:inputFile id="fileTest">
<f:ajax listener="#{submitFormBean.uploadTest()}"/> --> This input file using Ajax call doesn't work
</h:inputFile>
</h:form>
</h:body>
</html>
bean
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
#ViewScoped
#ManagedBean(name = "submitFormBean")
public class SubmitFormBean{
public SubmitFormBean() {
}
public void uploadTest(){
System.out.println("Test");
}
}
Been stuck on this for a couple of days now so any help would be greatly appreciated. As mentioned, this works fine on my local development environment, but fails when deployed onto Jelastic's Glassfish4.

JSF ajax event does not work in form

Yesterday I created a really simple JSF project to practice how to render a dynamic menu with Ajax request.
The addition method works pretty well, but in case I switch to another tab the result is not calculated and displayed in the page.
I debugged the code for hours, but till yet I haven't found the root cause. Do you have any idea what the problem can be?
Web Pages
index.xhtml:
<?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://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Mathematics</title>
</h:head>
<h:body>
<h:panelGroup id="menu">
<h:form>
<f:ajax render="page">
<h:commandButton value="Addition" action="#{menuMB.setPage('addition')}"></h:commandButton>
<h:commandButton value="Subtraction" action="#{menuMB.setPage('subtraction')}"></h:commandButton>
<h:commandButton value="Multiplication" action="#{menuMB.setPage('multiplication')}"></h:commandButton>
<h:commandButton value="Division" action="#{menuMB.setPage('division')}"></h:commandButton>
</f:ajax>
</h:form>
</h:panelGroup>
<h:panelGroup id="page">
<ui:include src="/WEB-INF/includes/#{menuMB.page}.xhtml"/>
</h:panelGroup>
</h:body>
</html>
addition.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:panelGroup id="header">
<h1>Addition</h1>
</h:panelGroup>
<h:panelGroup id="content">
<h:form id="addition">
<h:outputLabel for="number1" value="Number1:"/>
<h:inputText id="number1" value="#{mathMB.number1}">
<f:ajax event="keyup" listener="#{mathMB.addition}" execute="number1 number2" render="result"/>
</h:inputText>
<h:outputLabel for="number2" value="Number2:"/>
<h:inputText id="number2" value="#{mathMB.number2}">
<f:ajax event="keyup" listener="#{mathMB.addition}" execute="number1 number2" render="result"/>
</h:inputText>
<h:outputLabel for="result" value="Result:"/>
<h:outputText id="result" value="#{mathMB.result}"/>
</h:form>
</h:panelGroup>
All other xhtml pages (division, multiplication, subtraction) are the same as above, only the addition method is changed with the proper one.
Managed Beans
MathMB
#ManagedBean
#RequestScoped
public class MathMB {
private Integer number1;
private Integer number2;
private Integer result;
public void addition() {
if (number1 == null || number2 == null) {
return;
}
result = number1 + number2;
}
subtraction...
multiplication...
division...
//getters + setters
}
MenuMB
#ManagedBean
#ViewScoped
public class MenuMB implements Serializable {
private String page;
#PostConstruct
public void init() {
page = "addition";
}
public String getPage() {
return page;
}
public void setPage(String page) {
this.page = page;
}
}
Thanks a lot for any tips!
You need to put the <f:ajax> tag inside the commandbuttons, not the other way round.
<h:commandButton value="Addition" action="#{menuMB.setPage('addition')}">
<f:ajax render="page"/>
</h:commandButton>
<h:commandButton value="Subtraction" action="#{menuMB.setPage('subtraction')}">
<f:ajax render="page"/>
</h:commandButton>
...

JSF 2.0 Ajax commandButton execute only

I would like to execute a simple command with ajax but without any inputs.
This is my code:
<h:form>
<h:commandButton class="button"
value="Invite"
action="#{trainingController.inviteProfile(p)}">
</h:commandButton>
</h:form>
The variable p is from a which is filled also via an ajax request.
Any ideas how to achieve my goal?
You can archive by using f:ajax.
The example show below.
XHTML
<?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:f="http://java.sun.com/jsf/core">
<h:head>
<title>Submit</title>
</h:head>
<h:body>
<h:form>
<h:commandButton value="Submit"
action="#{coffeeBean.submit('abc')}">
<f:ajax execute="#this"
render="#this" />
</h:commandButton>
</h:form>
</h:body>
</html>
ManagedBean
#ManagedBean(name = "coffeeBean")
#SessionScoped
public class CoffeeBean implements Serializable {
public void submit(String s){
System.out.println("s:" + s);
}
}
You can see more information about EL library from this like, and this like is present How to check version of EL is server.

Update child component in JSF (AJAX)

I want update subcomponent with id="two". Everything is working until i put form in another component like h:panelGrid.
<h:panelGroup id="one">
<h:panelGroup id="two">
<h:outputText value="#{testBean.num}"/>
</h:panelGroup>
</h:panelGroup>
<br/>
<h:panelGrid columns="1">
<h:form>
<p:commandButton value="update"
action="#{testBean.inc()}"
update=":one:two"
ajax="true"
/>
</h:form>
</h:panelGrid>
In this case i am getting:
SF1073: java.lang.IllegalArgumentException caught during processing of RENDER_RESPONSE 6 : UIComponent-ClientId=, Message=one
What is wrong ?
PS: update=":one" is works, but i dont want update whole "one" component.
Here is a full code.
xhtml page:
<?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://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h:panelGroup id="one">
<h:panelGroup id="two">
<h:outputText value="#{testBean.num}"/>
</h:panelGroup>
</h:panelGroup>
<br/>
<h:panelGrid columns="1" id="table">
<h:form id="form">
<p:commandButton value="update"
action="#{testBean.inc()}"
update=":one:two"
ajax="true"
/>
</h:form>
<!-- .....another components .... -->
</h:panelGrid>
</h:body>
</html>
the bean:
#Named
#ViewScoped
public class TestBean implements Serializable{
private int num;
public void inc() {
System.out.println("inc");
num++;
}
public int getNum() {
return num;
}
public void setNum(int num) {
this.num = num;
}
}
This very unhelpful error is caused by your invalid update syntax: :one:two first tries to look up one as a NamingContainer (see Communications in JSF 2.0). If it finds the component, but it isn't a NamingContainer, it throws the exception you're seeing.
To fix this, simply specify the correct update value:
<p:commandButton value="update" action="#{testBean.inc()}"
update=":two" ajax="true" />

f: or p:ajax and JSF with templating doesn't work - Primefaces

I am new here :)
I have got a problem with one of my first web-apps written using JSF.
I wrote a simple template, it looks like this:
<?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:ui="http://java.sun.com/jsf/facelets">
<h:head>
<p:layout fullPage="true">
<p:layoutUnit position="north" header="North - header" style="font-size: 15px;">
<h:form>
<ui:include src="header.xhtml"/>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="west" header="West - menu" style="font-size: 15px;">
<h:form>
<ui:include src="menu.xhtml"/>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" header="Center - content" style="font-size: 15px;">
<h:form id="contentForm">
<ui:insert name="content"/>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="east" header="East - nothing" style="font-size: 15px;">
</p:layoutUnit>
<p:layoutUnit position="south" header="South - footer" style="font-size: 15px;">
<ui:include src="footer.xhtml"/>
</p:layoutUnit>
</p:layout>
</h:head>
<h:body>
</h:body>
</html>
And in another file (obrazek.xhtml) I wrote this code:
<?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:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Simple JSF Facelets page</title>
</h:head>
<h:body>
<ui:composition template="template.xhtml">
<ui:define name="content">
<h:form id="PHOTOS">
<p:panelGrid columns="2">
<h:commandLink action="#{pic.addValue1}">
<p:graphicImage url="resources/images/1.png">
<p:ajax update="wynik1" event="click"/>
</p:graphicImage>
</h:commandLink>
<h:commandLink action="#{pic.addValue2}">
<p:graphicImage url="resources/images/2.png">
<p:ajax update="wynik1" event="click"/>
</p:graphicImage>
</h:commandLink>
<h:outputText value="Obrazek 1: #{pic.val1}" id="wynik1"/>
<h:outputText value="Obrazek 2: #{pic.val2}" id="wynik2"/>
</p:panelGrid>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
I wanted to insert some code into "content" primefaces layoutUnit.
IDEA: It has to be 2 pictures and if I click on one of them, AJAX should show the value from ManagedBean using h:outputText. (it always adds +1 to the value :))
The problem is: if I dont add templating** into obrazek.xhtml everything works fine, but if I add:
<ui:composition template="template.xhtml">
<ui:define name="content">
CODE FROM FORM "PHOTOS" (the one about I called upper that "is no templated"**)
</ui:define>
</ui:composition>
while I am clicking on some picture nothing happens. Just "#" is added to my URL and it looks like that:
http://localhost:8080/obrazek.xhtml#
And my ManagedBean also:
#ManagedBean(name = "pic", eager = true)
#SessionScoped
public class PictureBean {
private int val1;
private int val2;
public void addValue1(){
val1 += 1;
}
public void addValue2(){
val2 += 1;
}
GETTERS AND SETTERS FOR VAL1 VAL2
}
I have rummaged all the web looking for the answer but uselessly.
Could anyone here help me? :)
Pardon for so long post and not coloured syntax, have to figure out "how to" do it, first :D

Resources