Could somebody explain me why a4j:commandButton doesn’t reacts at first click in the next scenario?
I have to hit it two times in order to get the action executed…
facelets composite template named principal.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<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:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<f:view contentType="text/html">
<h:head>
<meta http-equiv="content-type" content="text/xhtml; charset=UTF-8" />
</h:head>
<h:body>
<div id="heading">
<ui:insert name="heading">
<ui:include src="/adm/includes/menu.xhtml"/>
</ui:insert>
</div>
<div id="content">
<br />
<a4j:outputPanel ajaxRendered="true">
<ui:insert name="content"/>
</a4j:outputPanel>
<br />
</div>
<div id="footer">
<ui:insert name="footer">
<ui:include src="/adm/includes/footer.xhtml"/>
</ui:insert>
</div>
</h:body>
</f:view>
</html>
The JSF page with the problematic ajax button:
<ui:composition template="/adm/templates/principal.xhtml">
<ui:define name="content">
<rich:panel header="#{msgs.usuariosNuevo}">
<h:form id="formUsuariosNuevo" prependId="false">
<h:panelGrid columns="3">
<h:outputText value="#{msgs.email}" />
<h:inputText value="#{usuarioCtrl.mdl.email}" id="email" />
<h:outputText value="#{msgs.pwd}" />
<h:inputSecret value="#{usuarioCtrl.mdl.pwd}" id="pwd" />
</h:panelGrid>
<a4j:commandButton value="#{msgs.guardar}" action="#{usuarioCtrl.guardarUsuarioAction}" />
</h:form>
</rich:panel>
</ui:define>
</ui:composition>
... and the 'top' toolbar menu menu.xhtml:
<h:form prependId="false" id="formMenu">
<rich:toolbar height="26px">
<rich:dropDownMenu mode="ajax">
<f:facet name="label">
<h:panelGroup>
<h:graphicImage value="/resources/img/icon/usuarios.png" styleClass="pic" width="20" height="20" />
<h:outputText value="Usuarios" />
</h:panelGroup>
</f:facet>
<rich:menuItem label="Nuevo" action="#{menuCtrl.usuariosNuevoAction}" icon="/resources/img/icon/nuevo.png" />
<rich:menuItem label="Gestión" action="#{menuCtrl.usuariosGestionAction}" icon="/resources/img/icon/gestion.png" />
</rich:dropDownMenu>
<!-- Others dropDownsMenu's here ... -->
</rich:toolbar>
</h:form>
thanks!
I think the problem happens when you're using JSF #ManagedBean. You need declare that form bean variable in current flow.
I'm using Richfaces 4.2, Spring-web-flow 2.3.0, Spring 3.1.1
formbean
#RequestScoped
#ManagedBean
public class SearchForm implements Serializable {
private static final long serialVersionUID = 1L;
private String pattern = "Please insert";
public String getPattern() {
return pattern;
}
public void setPattern(String pattern) {
this.pattern = pattern;
}
}
home-flow.xml
<var name="searchForm" class="com.inhouse.web.form.SearchForm"/>
<view-state id="home" view="home.xhtml" model="searchForm">
<transition on="search">
<evaluate expression="searchController.search(requestParameters.pattern)" result="flashScope.searchResults"></evaluate>
</transition>
</view-state>
home.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:sf="http://www.springframework.org/tags/faces"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<ui:composition template="/WEB-INF/layouts/template.xhtml">
<ui:define name="content">
<h:form>
<h:inputText value="#{searchForm.pattern}" />
<a4j:commandButton action="search" value="Search" render="searchResult" immediate="true">
<f:param name="pattern" value="#{searchForm.pattern}"></f:param>
</a4j:commandButton>
</h:form>
<h:panelGroup id="searchResult">
<h:outputText value="#{searchResults}" />
</h:panelGroup>
</ui:define>
</ui:composition>
</html>
Controller
#Controller
public class SearchController {
public String search(String pattern) {
return "this is the search results";
}
}
Related
Issue: I am displaying a button for change of the language on a custom login form
When user clicks on the button there should be a call to a function that changes the language, however, that is not happening because spring security is blocking other calls on that page.
Java spring security configuration that I am using is:
#Configuration
#EnableWebSecurity(debug=false)
public class SecurityConfig extends WebSecurityConfigurerAdapter {
#Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception {
auth.inMemoryAuthentication()
.withUser("test000").password("test1").roles("USER").and()
.withUser("admin000").password("test1").roles("ADMIN").and()
.withUser("dba000").password("test1").roles("ADMIN","DBA");
}
#Override
protected void configure(HttpSecurity http) throws Exception {
http
.authorizeRequests()
.antMatchers("/login.xhtml","/resources/**","/javax.faces.resource/**").permitAll()
.antMatchers("/views/**","/WEB-INF/template/**").authenticated()
.anyRequest().authenticated()
.and().formLogin().loginPage("/login.xhtml").usernameParameter("username").passwordParameter("password").defaultSuccessUrl("/home.xhtml")
.and().logout().logoutSuccessUrl("/login.xhtml").deleteCookies("JSESSIONID").invalidateHttpSession(true)
.and().exceptionHandling().accessDeniedPage("/accessDenied.xhtml")
.and().httpBasic();
}
}
Note: When I swithch off csrf.disable() then the call to the button works, but then log in stops working.
How should I set this up in order to have both log in and language change in place?
JSF Login 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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html" id="fview" locale="#{USManager.locale}">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>#{appMsg['application.title']}</title>
<ui:debug />
<f:metadata>
<ui:insert name="metadata" />
</f:metadata>
<h:head>
<h:outputStylesheet library="css" name="common-style.css" />
<h:outputStylesheet library="css" name="style.css" />
</h:head>
<h:body style="background-image:none; background-color:#253A7C;" styleClass="LoginPage" onload='document.loginForm.username.focus();'>
<p:layout fullPage="true">
<p:layoutUnit position="center">
<h:panelGrid columns="2" id="loginContainer">
<div class="LoginPageLogo"> </div>
<h:panelGroup>
<h:outputText value="#{appMsg['login.title']}" styleClass="LoginTitle" />
<h:form id="loginForm" method="post" prependId="false" action="/login">
<p:growl id="loginMessages" showSummary="true" showDetail="true" autoUpdate="true" life="3000" />
<p:panel header="#{appMsg['login.form.header']}">
<h:panelGrid id="loginPanel" columns="2">
<p:spacer />
<p:spacer />
<p:inputText id="username" size="30" />
<p:spacer />
<h:outputText value="#{rccMsg['login.form.username']}" />
<p:spacer />
<p:spacer></p:spacer>
<p:message for="username"></p:message>
<p:password id="password" feedback="false" size="30" />
<p:spacer />
<h:outputText value="#{appMsg['login.form.password']}" />
<p:spacer />
<p:spacer />
<p:message for="password"></p:message>
<!-- <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/> -->
<p:commandButton value="#{appMsg['login.form.submit']}" ajax="false" />
<p:commandButton id="btnSr" value="SR" actionListener="#{USManager.useSr}" rendered="#{USManager.language=='en'}" process="#this" update="#parent">
<!-- <f:setPropertyActionListener value="sr" target="#{USManager.language}"></f:setPropertyActionListener> -->
<!-- <h:graphicImage name="images/flag_sr.png"/> -->
</p:commandButton>
<p:commandButton id="btnEn" value="EN" actionListener="#{USManager.useEn}" rendered="#{USManager.language=='sr'}" process="#this" update="#parent">
<!-- <f:setPropertyActionListener value="en" target="#{USManager.language}"></f:setPropertyActionListener> -->
<!-- <h:graphicImage name="images/flag_en.png"/> -->
</p:commandButton>
</h:panelGrid>
</p:panel>
</h:form>
</h:panelGroup>
</h:panelGrid>
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
I have a problem with selection primefaces datatable. When I choose any record my setter doesn't invoke. I found couple solution like change template or change to ViewSCope I'm changing everything but still does't work
template.xhtml
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jsf/composite/custom"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title><ui:insert name="title">Default title</ui:insert></title>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Social Test</title>
</f:facet>
<f:facet name="middle">
<h:outputStylesheet name="bootstrap/css/bootstrap.css" />
<h:outputStylesheet name="css/style.css" />
<h:outputStylesheet name="bootstrap/css/bootstrap-social.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" />
<h:outputScript name="bootstrap/js/bootstrap.js" />
<!-- h:outputScript name="js/script.js" /-->
</f:facet>
<f:facet name="last">
</f:facet>
</h:head>
<h:body>
<div id="header"></div>
<div id="menu"></div>
<div id="content">
<ui:insert name="content"></ui:insert>
</div>
<div id="footer"></div>
</h:body>
</html>
ticketEdit.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">
<ui:composition template="/template/template.xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsf/composite/custom"
xmlns:p="http://primefaces.org/ui">
<ui:define name="content">
<h2 class="form-signin-heading">#{labRes.add_ticket}</h2>
<h:form id="form">
<p:accordionPanel>
<p:tab title="#{labRes.train_details}">
<h:panelGrid columns="2" cellpadding="10">
<c:autoComplete
completeMethod="#{ticketBean.trainAutoCompleteBean.complete}"
minQueryLength="2"
converter="#{ticketBean.trainAutoCompleteBean.converter}"
nameLable="#{labRes.train_number}"
autoValue="#{ticketBean.selectedTrain}" forceSelection="true"
queryDelay="500" effect="fade" cid="ticketAuto" listener="null"
labelStyleClass="labelPaddingParameter" ajax="true"
update="#form" />
<c:inputText id="nr" cid="cnr"
nameLable="#{labRes.train_number}" disabled="true"
inputValue="#{ticketBean.selectedTrain.name}"
labelStyleClass="labelPaddingParameter" />
</h:panelGrid>
</p:tab>
<p:tab title="#{labRes.train_details}">
<h:panelGrid columns="1" cellpadding="10" id="pgTrainDetails">
<c:calendar pattern="MM-dd-yyyy" value="#{ticketBean.day}"
isListener="true" update=":form" ajax="true"
nameLable="#{labRes.departure_date}" cid="depDat"
listener="#{ticketBean.onDateSelect}" />
<p:dataTable var="schedule" value="#{ticketBean.tripSchedules}"
selectionMode="single"
selection="#{ticketBean.selectedSchedule}"
rowKey="#{schedule.id}" styleClass="pickListWidth"
paginator="true" rows="10"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5" id="scheduleTable">
<f:facet name="header">
<c:calendar pattern="MM-dd-yyyy" value="#{ticketBean.day}"
isListener="true" update=":form" ajax="true"
nameLable="#{labRes.departure_date}" cid="depDat"
listener="#{ticketBean.onDateSelect}" />
</f:facet>
<p:column headerText="#{menRes.id}" sortBy="#{schedule.id}"
style=" text-align:center">
<h:outputText value="#{schedule.id}" />
</p:column>
<p:column headerText="#{labRes.departure_time}"
sortBy="#{schedule.departure}" style="text-align:center">
<h:outputText value="#{schedule.departure}" />
</p:column>
</p:dataTable>
</h:panelGrid>
</p:tab>
<p:tab title="#{labRes.ticket_details}">
<h:panelGrid columns="2" cellpadding="10">
</h:panelGrid>
</p:tab>
</p:accordionPanel>
</h:form>
</ui:define>
My bean (I'm using Spring) but I have to use #ViewScope because spring does't contain #Scope('view')
// the same annotations in AbstractBean
#Component
#ViewScope //faces bean package
public class TicketBean extends AbstractBean {
... code ...
public TripSchedule getSelectedSchedule() {
return selectedSchedule;
}
public void setSelectedSchedule(TripSchedule selectedSchedule) {
this.selectedSchedule = selectedSchedule;
}
Thanks for help !
I think you need to add some ajax to the datatable:
<p:ajax event="rowSelect"/>
<p:ajax event="rowUnselect"/>
I'm new to web development using JSF , i have an issue in displaying a message for a validation.
I'm trying to display a message related to length validation.
this is the code for the page :
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<h:form>
<h:message showDetail="true" showSummary="true" for="txtNum" />
<p:panelGrid columns="2">
<p:outputLabel value="value" id="lblValue" for="txtNum" />
<p:inputText value="#{test.num}" required="true" id="txtNum">
<f:facet name="">
<f:validateLength maximum="3"></f:validateLength>
</f:facet>
</p:inputText>
<p:commandButton value="do" action="#{test.func()}"></p:commandButton>
</p:panelGrid>
</h:form>
</h:body>
</html>
this the code for the managed bean (configured from faces config):
public class Test {
private int num;
public int getNum() {
return num;
}
public void setNum(int num) {
this.num = num;
}
public String func()
{
return null;
}
}
This should work. Don't forget about IDs and naming containers.When using AJAX do not skip process and update attributes.
<h:form id="form">
<p:panelGrid columns="2" id="formGrid">
<p:outputLabel value="value" id="lblValue" for=":form:txtNum" />
<p:inputText value="#{test.num}" required="true" id="txtNum">
<f:validateLength maximum="3"/>
</p:inputText>
<h:message showDetail="true" showSummary="true" for=":form:txtNum" />
<p:commandButton value="do" action="#{test.func()}" process=":form:formGrid" update=":form:formGrid"/>
</p:panelGrid>
</h:form>
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" />
I am trying to insert a popup which has to be lazy-loaded when clicking a h:commandButton. I insert its content via ui:include. However the preRenderView method is not being fired and the PopupPageModel model property is not being initialized so I get a NullPointerException when trying to invoke the business logic method inside PopupPageController.
The idea is having separate Model/Controller beans for both pages involved but I am not sure this is the correct approach, so I would like to know other approaches or the correct way to implement mine.
Thanks in advance.
Invoking page:
<h:commandButton
value="#{msg['jsf.thisScreen.someText']}">
<f:param name="theParameter" value="#{InvokingScreenModel.theParameter}" />
<rich:componentControl target="myPopup" operation="show" />
</h:commandButton>
<rich:popupPanel id="myPopup" modal="true" resizeable="false" autosized="true"
onmaskclick="#{rich:component('myPopup')}.hide()">
<f:facet name="header">
<h:outputText value="#{msg['jsf.anotherScreen.someText']}" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#" onclick="#{rich:component('myPopup')}.hide(); return false;"></h:outputLink>
</f:facet>
<ui:include src="popupPage.xhtml" />
</rich:popupPanel>
Popup page:
<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:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:c="http://java.sun.com/jsf/core">
<f:metadata>
<f:viewParam name="theParameter"
value="#{PopupPageModel.theParameter}" />
<f:event type="preRenderView"
listener="#{PopupPageController.initialize}" />
</f:metadata>
<h:form id="someForm">
//Some things here
</h:form>
</ui:composition>
Popup page controller
#Component("PopupPageController")
#Scope("request")
public class PopupPageController {
#Autowired
private PopupPageModel model;
#Autowired
private SomeService service;
public void initialize(){
if (!FacesContext.getCurrentInstance().isPostback()) {
//Change some model properties via service methods
}
}
public void doSomething() {
}
}
I've been struggling with this for several days and I've been unable to find a lazy-loading solution for the popup so I'm posting a solution I managed to do that doesn't include this feature just in case it's useful for someone.
Invoking page extract
<h:form>
<a4j:outputPanel id="stuffDetails">
//Some ajax-rendered tabs and accordions above the button
.....
.....
<a4j:commandButton
value="Open Popup"
actionListener="#{PopupController.someInitializationListenerMethod}"
oncomplete="#{rich:component('thePopup')}.show();"
render="formPopup">
</a4j:commandButton>
</a4j:outputPanel>
</h:form>
<rich:popupPanel id="thePopup" modal="true"
resizeable="false" autosized="true"
onmaskclick="#{rich:component('thePopup')}.hide();">
<f:facet name="header">
<h:outputText value="Some header here" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#"
onclick="#{rich:component('thePopup')}.hide(); return false;">
</h:outputLink>
</f:facet>
<h:form id="formPopup">
<ui:include src="popup.xhtml" />
</h:form>
</rich:popupPanel>
popup.xhtml
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes" ?>
<html>
<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:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:c="http://java.sun.com/jsf/core">
//Some controls shown inside the popup
......
......
<a4j:commandButton value="Process data and close popup"
actionListener="#{PopupController.someProcessingMethod}"
render=":stuffDetails :formPopup"
oncomplete="#{rich:component('thePopup')}.hide();" />
<h:commandButton value="Cancel"
onclick="#{rich:component('thePopup')}.hide(); return false;" />
</ui:composition>
</html>
The render=":stuffDetails :formPopup" in popup.xhtml is to avoid the infamous JSF spec issue 790 described by BalusC here and here.
Any suggestions welcome.