This question already has answers here:
commandButton/commandLink/ajax action/listener method not invoked or input value not set/updated
(12 answers)
Closed 6 years ago.
I have a page that has a preRender call that prepares everything to be displayed in the page. I'm not sure if it's relevant, but the page recieves a few params from the index.xhtml that precedes the experience.
I have a commandButton that I need to execute a server-side method (an update, to be precise). There is no need for a refresh on the page.
So I'm using ajax. Here's the button's, code
<h:commandButton value="Save">
<f:ajax event="click" listener="#{bean.save}"/>
</h:commandButton>
So far, on the java side, here's the bean's save method
public void save(){
log.debug("Save executed!");
}
I've added some logging to check what's being executed. When I click the button, the only thing that happens is that the preRender method is executed (and not entirely, just a part of it). Nothing else happens. Visually, the page is not refreshed or anything.
I suspect that when I click the button, the page is being refreshed and therefore, the preRender method (called Build()) is executed, but since there are no parameters (remember that the Build requires parameters passed through <f:param>), something bugs out.
Bottom line: I just need to execute the save method when clicking on the button without refreshing or redirecting anything.
Ideas?
--EDIT--
INDEX.XHTML
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jstl/core">
<ui:define name="body">
<h:link outcome="agreementDetail.xhtml" value="EA-15558">
<f:param name="serviceId" value="EA-15558" />
<f:param name="site" value="NIC" />
</h:link>
</ui:define>
</html>
AgreementDetail.XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jstl/core">
<f:view>
<f:event type="preRenderView" listener="#{agreement.build}"/>
</f:view>
<ui:define name="body">
<f:view>
<h:form>
<h:commandButton value="Save" action="#{agreement.save}">
<f:ajax/>
</h:commandButton><br/><br/>
<h:dataTable value="#{agreement.licenseServerNames}" var="licenseServerName">
<h:column>
<h:inputText value="#{licenseServerName}"/>
</h:column>
</h:dataTable>
</h:form>
</f:view>
</ui:define>
</html>
AgreementBean.java
#ManagedBean(name="agreement")
#RequestScoped
public class AgreementBean {
#ManagedProperty("#{param.serviceId}")
private String serviceId;
#ManagedProperty("#{param.site}")
private String site;
private List<String> licenseServerNames; //GETTERS AND SETTERS OMITTED TO AVOID EXCESS CODE
#PostConstruct
public void build(){
logger.debug("START");
methodOne();
logger.debug("END");
}
public void save(){
logger.debug("SAVE!!!!!");
for(String name : licenseServerNames){
logger.debug("Servername = "+name);
}
}
}
This worked for me."Show" is a boolean that you can set upon successful save.
<h:commandButton id="ajax" value="Save" action="{agreement.save}" >
<f:ajax execute="#form" render="#form" />
</h:commandButton>
<h:outputScript rendered="#{agreement.show}">alert("save");</h:outputScript>
Related
I'm having this really weird issue where my commandLinkonly work if I have BOTH links in the same view.
Works fine, both links:
<ui:composition template="../../template.xhtml" xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<ui:define name="content">
<h:form>
<p:dataTable var="v" value="#{myBean.myList}">
<p:column headerText="Name">
<h:commandLink value="Go to next page" action="#{myBean.doThing(v)}" />
<p:commandLink value="Go to next page" action="#{myBean.doThing(v)}" />
</p:column>
</p:dataTable>
<p:commandButton value="Submit" ajax="false" actionListener="#{myBean.submit}" />
</h:form>
</ui:define>
</ui:composition>
But if I remove either link, it doesn't even reach the method doThing() and reloads an empty page.
My bean:
#ManagedBean(name="myBean")
#RequestScoped
public class MyBean {
private List<Object> myList = new ArrayList<>();
public MyBean() {
}
public String doThing(Object obj) {
// This never prints if I remove one of the links
System.out.println("You're doing the thing!");
return "nextView?faces-redirect=true"
}
// Getters, setters etc.
}
I'm using JSF 2.0 and GlassFish 4.0.
How can I fix this and why is it happening?
I have a commandLink in a p:dataTable in another view and it's working fine.
EDIT:
Added the complete XML for the composition part of the view. The partial is inside a template:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<!-- css imports, titles etc -->
</h:head>
<h:body>
<ui:insert name="menu">
<ui:include src="./default/content.xhtml" />
</ui:insert>
</h:body>
</html>
I'd like to create a master-detail screen with request params and requestScoped beans but the view param doesn't get filled.
The link that invokes the redirect:
<h:form>
<p:dataTable var="visit" value="#{visitBean.findAllVisits()}">
<p:column headerText="mdh">
<p:commandLink action="#{visitDetailBean.seeVisitDetails(visit)}">
<h:graphicImage library="images" name="details.png"/>
</p:commandLink>
</p:column>
....
The method behind it:
public String seeVisitDetails(Visit visit) throws IOException {
return "/pages/mdh-details.xhtml?visitId=" + visit.getId()+ ";faces-redirect=true";
}
The details xhtml page:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<f:metadata>
<f:viewParam name="visitId" value="#{visitDetailBean.currentVisitId}" />
</f:metadata>
<ui:composition template="/templates/masterLayout.xhtml">
<ui:define name="content">
<h:outputText value="#{visitDetailBean.currentVisit.name}"/>
test
</ui:define>
</ui:composition>
and last the details Bean:
private long currentVisitId;
public void setCurrentVisitId(long currentVisitId) {
this.currentVisitId = currentVisitId;
}
public long getCurrentVisitId() {
return currentVisitId;
}
public Visit getCurrentVisit() {
return visitService.findVisit(currentVisitId);
}
currentVisitId is always 0.. I actually can't really find it.
When using templating, anything outside <ui:composition> and <ui:define> is ignored. This includes <f:metadata>.
Move it to inside an <ui:define> of the <ui:composition>.
E.g.
<ui:composition template="/templates/masterLayout.xhtml">
<ui:define name="metadata">
<f:metadata>
<f:viewParam ... />
</f:metadata>
</ui:define>
<ui:define name="content">
...
</ui:define>
</ui:composition>
See also:
When using <ui:composition> templating, where should I declare the <f:metadata>?
Unrelated to the concrete problem, you'd better place masterLayout.xhtml in /WEB-INF folder to prevent direct access.
<ui:composition template="/WEB-INF/templates/masterLayout.xhtml">
See also:
Which XHTML files do I need to put in /WEB-INF and which not?
I have some problems with session scoped bean working with f:viewParam. So I have two pages, test_first.xhtml and test_second.xhtml, and a TestBean.java.
first.xhtml:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head/>
<h:body>
<h:form>
<h:link value="link1" outcome="test_second" >
<f:param name="id" value="1"/>
</h:link>
<br/><br/>
<h:link value="link2" outcome="test_second" >
<f:param name="id" value="2"/>
</h:link>
</h:form>
</h:body>
</html>
second.xhtml:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<f:metadata>
<f:viewParam name="id" value="#{testBean.userId}" />
</f:metadata>
<h:head/>
<h:body>
<h:form>
This is the second page.
<h:outputText value="Selected id is #{testBean.userId}" />
<h:commandButton value="Print page id" action="#{testBean.print()}" />
<h:commandButton styleClass="submitButton" value="Submit" action="#{testBean.submit}">
<f:ajax execute="#form" render="#form"/>
</h:commandButton>
</h:form>
</h:body>
</html>
TestBean.java:
#ManagedBean
#SessionScoped
public class TestBean implements Serializable{
private Integer userId;
public void print() {
System.out.println(userId);
}
public void submit() {
System.out.println(userId);
}
/...
}
Start running from first.xhtml, if I open link1 in a new tab and then open link2 in another new tab. Now I got two pages.
If I click the "Print page id" button in link1, 1 will be printed in the console. In link2 the printed value will be 2.
But if I click the Submit button in link1, 2 will be printed and the rendered text will change from 1 to 2. (because link2 is opened later and the bean is session scoped?)
(Update: Why is this case? How can I still print "1" if I click "Submit"?)
I want to keep the bean as session scoped for other properties basically. So any thoughts on this or any alternative methods? Many thanks!
If you want it working in different tabs or windows, you need to put those tab specific properties on a ViewScoped or RequestScoped Bean. For properties that are session specific, you could create another Bean and make it SessionScoped.
I have the following 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">
<ui:composition
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:o="http://omnifaces.org/ui"
xmlns:thehub="http://java.sun.com/jsf/composite/components/thehub"
template="/templates/masterTemplate.xhtml">
<f:metadata>
<f:viewParam
id="returnToViewParam"
name="returnTo"
value="#{loginMB.returnTo}"
required="true" />
<f:viewParam
id="oauth_verifierViewParam"
name="oauth_verifier"
value="#{loginMB.oauth_verifier}" />
<f:viewParam
id="oauth_tokenViewParam"
name="oauth_token"
value="#{loginMB.oauth_token}" />
<f:event
type="preRenderView"
listener="#{loginMB.preRenderView()}" />
</f:metadata>
<ui:define name="body">
<o:form
id="loginForm"
includeViewParams="true">
<div class="form-vertical well">
<h4>New Users</h4>
<h5>
<h:link outcome="signup">Click here to create an account</h:link>
</h5>
<hr />
<h4>Existing Users</h4>
<h:commandButton
id="googleLoginCommandLink"
styleClass="btn"
action="#{loginMB.redirect()}"
value="Google">
<f:param
name="returnTo"
value="#{param.returnTo}" />
</h:commandButton>
<div class="clearfix"></div>
</div>
</o:form>
</ui:define>
</ui:composition>
And the following bean:
#ManagedBean
#RequestScoped
public class LoginMB implements Serializable {
private static final long serialVersionUID = 1L;
private String returnTo;
public void redirect() {
log.debug("redirect() returnTo:{}", returnTo);
......getter/setters
}
No matter what I do, I can't seem to get returnTo bound once the commandButton is clicked. Since this is a login page, I'd really not like to have LoginMB be a #ViewScoped bean.
Advice? Is there a better way to handle this scenario?
EDIT:
I'm running this on TomEE+ Server v1.5.1 which is served up by MyFaces 2.1.10
Added full page
Clarified the problem: Inside the redirect() function, returnTo is null
Your <f:metadata> is outside <ui:define> and is therefore completely ignored. Add an <ui:insert name="metadata"> to the master template and put the <f:metadata> inside an <ui:define name="metadata"> of the template client.
See also:
When using <ui:composition> templating, where should I declare the <f:metadata>?
Once you fixed that, you can safely remove the <f:param> from the command button. This job is already done by <o:form includeViewParams="true">. If you didn't have it, then the <f:param> would indeed have been mandatory and you'd need to copypaste the same over all command links and buttons in the same form.
Motivation: I want to reduce the size of the page when is accessed, so I thought that lazy rendering on modalPanels would help. The idea is to render the modalPanel when the user clicks the link that displays it.
I want to lazy render on rich:modalPanel when the link to display it is clicked. To achieve this I've found a way:
Code of the modalPanel, wrapped inside a a4j:outputPanel
<a4j:outputPanel id="a4jPanel">
<rich:modalPanel id="panel" rendered="#{bean.renderPanel}">
<!-- here modalPanel things -->
</rich:modalPanel>
</a4j:outputPanel>
Code of the backing bean (session scope):
public boolean isRenderPanel() {
return renderPanel; //default value is false;
}
public void setRenderPanel(boolean value){
this.renderPanel=value;
}
public setRenderFalse(){
this.setRenderPanel(false);
}
Code of the page where it is invoked:
<a4j:form>
<a4j:jsFunction name="setRenderFalse" action="#{user.setRenderFalse}"/>
<a4j:commandLink value="render and show" oncomplete="Richfaces.showModalPanel('panel');setRenderFalse();" reRender="a4jPanel">
<f:setPropertyActionListener target="#{user.renderPanel}" value="true" />
</a4j:commandLink>
</a4j:form>
Problems:
The modalPanel needs to be wrapped inside an a4j:outputPanel because reRendering directly the modalPanel does not work (I never understood why).
After rendering it, an extra request is needed to set the render value to false (the bean is session scoped). Otherwise if we reload the page there would not be any lazy rendering because the value was set to true.
The backing bean has to handle one property to keep the state for each modalPanel, although this property is set to true whenever the link is clicked and set to false when the request is finished. I've tried to keep the rendered state with JS variables but it does not seem to work (they are just read once the page is loaded and never again).
Any more elegant way to do this?
There is a nice solution regarding your question. All is needed is a way to detect postback and couple of xhtmls.
First of all we need a bean that will help with indication of postback
public class HelperBean {
public boolean isPostback() {
FacesContext context = FacesContext.getCurrentInstance();
return context.getRenderKit().getResponseStateManager().isPostback(context);
}
}
empty.xhtml - for a blank content
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
</ui:composition>
modal.xhtml - for wrapping the modal definition
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<rich:modalPanel id="myLazyModal">
<h:outputText value="Modal Content"/>
</rich:modalPanel>
</ui:composition>
lazyModal.xhtml - for handling inclusion of the above xhtmls
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<a4j:include id="lazyModal" layout="block"
viewId="#{helperBean.postback ? 'modal.xhtml' : 'empty.xhtml'}"/>
</ui:composition>
finally use it
<h:form id="frmTest">
<a4j:include id="lazyModalContainer" layout="block" viewId="lazyModal.xhtml"/>
<a4j:commandButton id="btnSubmit" value="Submit" reRender="lazyModalContainer"
oncomplete="Richfaces.showModalPanel('myLazyModal');"/>
</h:form>
Now when the page is loaded empty.xhtml will be included till btnSubmit is clicked.
Regarding to the problems you mentioned (1):
Re-rendering components with the rendered attribute is a bit catchy. When the rendered expression is evaluated to false no markup is sent back to the client. Therefore, supplying the id of the none rendered component to the reRender attribute will never work cause there is no such id on the client side (DOM).
i think you should make separate xhtml(facelet) of modal panel and use ui:include and than on link click the link no need of boolean property than.
enter code here : <ui:include src="modalPanel path">, <a4j:commandLink id="abclink" oncomplete="#{rich:component('yourPanelname')}.show()" reRender="yourPanelForm"/>
Another solution is to set the render attribute of your modalpanel programmatically in the JSF component tree. So you wont't need an additional backing bean which has to handle one property to keep the state for each modalPanel:
Managed Bean:
public void togglePanel(ActionEvent event) {
UIComponent component = event.getComponent();
String forId = (String) component.getAttributes().get("for");
FacesContext currentInstance = FacesContext.getCurrentInstance();
UIComponent findComponent = ComponentFinder.findComponent(currentInstance.getViewRoot(), forId);
findComponent.setRendered(!findComponent.isRendered());
}
View:
Open the panel:
<a4j:commandLink actionListener="#{myBean.togglePanel}" value="Open">
<f:attribute name="for" value="targetPanelId" />
Close the Panel:
<a4j:commandLink id="closePanel" actionListener="#{myBean.togglePanel}" value="someLabel">
<f:attribute name="for" value="targetPanelId" />
The modalpanel:
<a4j:outputPanel ajaxRendered="true">
<rich:modalPanel id="targetPanelId" width="800" height="500" rendered="false" showWhenRendered="true">