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.
Related
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.
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>
...
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
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.
I defined a composite component (actually a few) and when I try to re-render a component inserted with I get the error mentioned:
<f:ajax> contains an unknown id ':contentFrm' - cannot locate it in the context of the component j_idt40
If I simply replace:
<et:pageContent formId="contentFrm">
with
<h:form id="contentFrm">
<div>
then everything works fine
Here is the relevant code:
<!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:composite="http://java.sun.com/jsf/composite">
<composite:interface>
<composite:attribute name="styleClass" default="access-box-content alpha omega grid-12" />
<composite:attribute name="formId" default="#{cc.attrs.id}" />
</composite:interface>
<composite:implementation>
<h:form id="#{cc.attrs.formId}">
<div class="#{cc.attrs.styleClass}">
<composite:insertChildren/>
</div>
</h:form>
</composite:implementation>
</html>
This is how I use the composite
<?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">
<ui:composition id="landing" xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:et="http://java.sun.com/jsf/composite/components"
template="/layout/template.xhtml"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<ui:define name="main-content">
<et:pageTitle title="#{msg.trx_lastTrx}" />
<et:tabBar formId="currentTrxFrm">
<et:tab bean="#{accountTransactionBacking}"
prompt="#{msg.trx_currentTrxs}"
reRender=":contentFrm"
tabId="1"
active="true"/>
</et:tabBar>
<et:pageContent formId="contentFrm">
<et:tabContentPanel rendered="#{accountTransactionBacking.selectedTab ==1}">
<ui:include src="/app/summary/currentTrxRG.xhtml" rendered="#{accountTransactionBacking.selectedTab ==1}"/>
</et:tabContentPanel>
</et:pageContent>
</ui:define>
</ui:composition>
TIA
Some more tests.. using same component get's the same result.. for example the following code gives similar error (even replacing render="accountSummaryLines" with render=":accountSummaryLines")..
<?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">
<ui:composition id="landing" xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:et="http://java.sun.com/jsf/composite/components"
template="/layout/template.xhtml"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<ui:define name="main-content">
<et:pageTitle title="#{msg.ls_lastStatement}" />
<et:tabBar formId="acctSummTabFrm">
<et:tab/>
</et:tabBar>
<et:pageContent formId="accountButtonsFrm">
....
<et:div styleClass="accountSummaryLines" divId="lastStatementLines">
<ui:repeat var="row" value="#{lastStatementBacking.lines.data}">
<h:outputText escape="false" value="#{row}" styleClass="grid-12 lastStatementDetail"/><br></br>
</ui:repeat>
</et:div>
<et:div styleClass="access-box-footer">
<h:commandButton styleClass="left" action="#{lastStatementBacking.lines.prevPage}" value="#{msg.buttonPrevPage}" style="float:left;">
<f:ajax render="accountSummaryLines" />
</h:commandButton>
<h:commandButton styleClass="right" action="#{lastStatementBacking.lines.nextPage}" value="#{msg.buttonNextPage}">
<f:ajax render="accountSummaryLines" />
</h:commandButton>
</et:div>
</et:pageContent>
</ui:define>
</ui:composition>
The only way I got this particular example working is using render="#form" like so..
It cannot be found because the composite component is by itself a NamingContainer. The real valid client ID would be :idOfComposite:contentFrm where idOfComposite is the (auto)generated ID of the composite component itself. If you do a View Source in webbrowser and locate the <form> in question, then you'll see it.
You need to give the composite component a fixed ID
<et:pageContent id="contentFrm">
and use exactly this ID on a plain HTML element which wraps the composite's content, e.g. <div> or <span>.
<composite:implementation>
<div id="#{cc.id}">
<h:form>
<div class="#{cc.attrs.styleClass}">
<composite:insertChildren/>
</div>
</h:form>
</div>
</composite:implementation>