I have a little problem with the rendered attribute. I want to use it for login, if someone connects for the first time on my website, he can log in, but when he's logged, he can't see the form. But when the page is loaded, I can't hide the form...
Maybe it would be easier with my code.
HTML
<h:panelGroup id="sidebar" layout="block">
<h:panelGroup id="sbox1" layout="block">
<h:panelGroup class="title" layout="block">
<h2> Espace Membre </h2>
</h:panelGroup>
<ul class="style2">
<h:form rendered="#{!membreCtrl.estConnecte}">
Connection : <h:outputText value="#{membreCtrl.estConnecte}"></h:outputText>
Login : <h:inputText id="login" value="#{membreCtrl.login}" /> <br/>
Password : <h:inputSecret id="mdp" value="#{membreCtrl.mdp}" /> <br/>
<h:commandButton action="#{membreCtrl.identifier()}" value="Se connecter" />
</h:form>
</ul>
</h:panelGroup>
Bean
public String identifier() {
membreConnecte = membreEJB.connecter(login, mdp);
if (membreConnecte == null) {
return "FAILURE";
}
estConnecte = true;
return "SUCCESS";
}
If I put the right login/password, I get on the index page, but then I would like to hide the <h:form ..that I wrote.
But it doesn't work. When I print the result in the Bean, my boolean "estConnecte" is true, but not when I write it on the HTML code.
Did you update the form after the button's click?
Put a p:outputPanel inside the form, if you are using Primefaces, and then update the form:
<h:form>
<p:outputPanel rendered="#{!membreCtrl.estConnecte}">
Connection : <h:outputText value="#{membreCtrl.estConnecte}"></h:outputText>
Login : <h:inputText id="login" value="#{membreCtrl.login}" /> <br/>
Password : <h:inputSecret id="mdp" value="#{membreCtrl.mdp}" /> <br/>
<p:commandButton action="#{membreCtrl.identifier()}" value="Se connecter" update="#form"/>
<p:outputPanel/>
</h:form>
Related
I am designing a page technology using jsf 2.0 and primefaces. In my page I insert a prime faces calendar. When the user click on calendar to change the default date, a warning message shown which is a dialog box containing two command button. Now what I am trying to do is when the user click on cancel command button, the date should be changed back to the default date which was populated from the first time page when the page loaded. I wrote a java script but its not working.
<label>Date<label>
<p:calendar readonlyInput="true" widgetVar="calDate" yearRange="c-20:c+20" navigator="true" id="b1incomeeffectfrom#{incmStatus.index}" value="#{userDate.effectiveFrom}" pattern="dd/mm/yyyy">
<p:ajax event="dateSelect" oncomplete="checkForDefault(this);" global="false"/>
</p:calendar>
<p:dialog rendered="#{user.Lock}" widgetVar="dlg1" header="Warning" modal="true">
<h:panelGroup layout="block" styleClass="modal-dialog">
<h:panelGroup layout="block" styleClass="modal-content">
<h:panelGroup layout="block" styleClass="modal-body">
<div class="form-horizontal">
<h:panelGroup layout="block" styleClass="form-group">
<h:outputLabel styleClass="col-xs-8 control-label">Are you sure want to change?</h:outputLabel>
</h:panelGroup>
</div>
</h:panelGroup>
<h:panelGroup layout="block" styleClass="modal-footer">
<p:commandButton value="Ok" type="button" styleClass="btn btn-primary" onclick="PF('dlg1').hide();PF('dlg2').show();" />
<p:commandButton value="Cancel" type="button" styleClass="btn btn-primary" onclick="resetDate();" />
</h:panelGroup>
</h:panelGroup>
</h:panelGroup>
</p:dialog>
javascript
function resetDate(){
PF('dlg1').hide();
calDate.setDate(null);
}
Your calendar value is coming from your backing bean (userDate.effectiveFrom). You will have to change the value there to take effect
<p:commandButton value="Cancel" type="button" styleClass="btn btn-primary"
onsuccess="PF('dlg1').hide()" action="#{userDate.resetDate()}" update="calDate" />
class UserDate{
[..]
public void resetDate(){
this.effectiveFrom = initialDate;
}
[..]
}
I have one xhtm in jsf and one modal within.
In this modal I have one field that I´m trying to validate and return an error.
my code:
Modal:
<rich:popupPanel id="cancelssi" modal="true" width="500" height="280" zindex="2" domElementAttachment="form" show="#{demandasMB.showCancelar}" showWhenRendered="#{demandasMB.showCancelar}" >
...
<h:panelGroup layout="block" class="area-input-100" id="idmotivocancelamentopanel">
<h:panelGroup class="label-campo">Justificativa de cancelamento:</h:panelGroup>
<h:inputTextarea styleClass="textarea-form-2-linhas" id="idmotivocancelamento" value="#{demandasMB.demandas.cnmmotivocancelamento}" maxlength="255"/>
<h:message for="idmotivocancelamento" />
</h:panelGroup>
<h:panelGroup layout="block" class="clear"/>
<h:panelGroup layout="block" styleClass="alinhaBotao">
<h:commandButton value="Cancelar">
<f:ajax render="idmotivocancelamento idmotivocancelamentopanel"
event="click"
listener="#{demandasMB.preCancelar()}"
execute="#form"
/>
</h:commandButton>
<h:commandButton value="Fechar"/>
</h:panelGroup>
</rich:popupPanel>
in my MB I have:
public void preCancelar(){
if(StringUtils.isBlank(demandas.getCnmmotivocancelamento())){
FacesMessage fm = new FacesMessage("Favor preencher");
FacesContext.getCurrentInstance().addMessage("idmotivocancelamento",fm);
}else{
showConfirmacaoCancelar = true;
showCancelar = false;
}
}
I´m building FacesMessage but doesn´t appear in my modal.
What I´m doing wrong ?
thanks
You need to ajax-update idmotivocancelamentopanel to reflect the FacesMessages you're adding.
An alternative is to use the <rich:message/>. Using the ajaxRendered="true" attribute will allow the message component be automatically updated on ajax-requests. So you'll instead have:
<rich:message for="idmotivocancelamento" ajaxRendered="true"/>
I have this code :
<h:form>
<h:commandLink value="Créer un compte" onclick="dlg3.show();"/>
</h:form>
<p:dialog id="modalDialoog" widgetVar="dlg3" draggable="false" resizable="false" dynamic="true" header="Inscription">
<center>
<p:panel id="xyzBody">
<h:form id="inscri-f">
<h:panelGrid id="loginPan" columns="2" bgcolor="White">
<h:outputText value="Nom d'utilisateur :" />
<p:inputText id="username" value="#{demandeBean.login}"></p:inputText>
<h:outputText value="Mot de passe :" />
<p:password id="pwd" value="#{demandeBean.pwd}"/>
<h:commandButton value="Envoyer demande" update=":inscri-f:cr"
actionListener="#{demandeBean.envoi_dde}"></h:commandButton>
<h:commandButton value="Retour" action="page1?faces-redirect=true"></h:commandButton>
<p:outputPanel id="cr">
<h:outputText rendered="#{demandeBean.saved}" value="#{demandeBean.message}"/>
</p:outputPanel>
</h:panelGrid>
</h:form>
</p:panel>
</center>
</p:dialog>
my problem is when I click commandLink "Créer un compte" dialog is shown and it disappears quickly.
This happens because <h:commandLink> executes a submit on the form that will be send the data to the server, the server will process the request, the server will generate a response and send it to client, thus getting the refresh behavior in browser.
Easy fix (for this scenario), add return false; at the end of the onclick to stop the form submission.
<h:commandLink value="Créer un compte" onclick="dlg3.show(); return false;"/>
As stated in BalusC comment, it would be easier to not have a <form> to begin with, so just using a plain <a>:
<a onclick="dlg3.show();">Créer un compte</a>
You can also use <p:commandlink ...oncomplete="dlg3.show();" /> instead of <h:commandlink onclick =.... />
It will ensure setting values in backing bean
In my code the CommandButton action does not work when I put it in the second or third PanelGroup. It only works when I put in the first PanelGroup. My code is shown below. What may be the problem?
<ui:define name="pageLocations">
<h:panelGroup layout="block" id="pageLocations">
<c:if test="#{param.typeTab == null && param.relationTab == null && param.propertyTab == null}">
<ui:param name="defaultHeaderTitle" value="Properties"/>
<!--<h:outputText value="Properties" />-->
</c:if>
<p class="breadcrumb">Admin <ezcomp:out value="raquo" />
Fields <ezcomp:out value="raquo" />
<strong>
#{param.pageHeaderTitle}#{defaultHeaderTitle}
</strong>
</p>
</h:panelGroup>
</ui:define>
<!--<ui:define></ui:define>-->
<ui:define name="pageHeaderTitle">
<h:outputText value="#{param.pageHeaderTitle}#{defaultHeaderTitle}" id="soso" />
</ui:define>
<ui:define name="sidemenu">
<ui:param name="fieldsPage" value="active"/>
</ui:define>
<ui:define name="admin-content">
<h:form prependId="false">
<h:panelGroup layout="block" class="well well-small" id="mainPanel">
<h:panelGroup layout="block" class="row-fluid">
<div class="span1"><ezcomp:out value="nbsp"/></div>
<div class="span4">
<ul class="nav nav-pills" style="margin-top:4px;margin-bottom:0">
<c:if test="#{param.typeTab == null && param.relationTab == null && param.propertyTab == null }">
<ui:param name="default" value="active"/>
<ui:param name="defaultHeaderTitle" value="Properties"/>
</c:if>
<li class="#{param.propertyTab} #{default}">
<p:commandLink value="Properties" immediate="true" update="mainPanel,fields,:soso,:pageLocations" >
<f:param name="propertyTab" value="active"/>
<f:param name="pageHeaderTitle" value="Properties"/>
</p:commandLink>
</li>
<li class="#{param.typeTab}">
<p:commandLink value="Types" immediate="true" async="true" update="mainPanel,fields,:soso,:pageLocations" >
<f:param name="typeTab" value="active"/>
<f:param name="pageHeaderTitle" value="Types"/>
</p:commandLink>
</li>
<li class="#{param.relationTab}">
<p:commandLink value="Fields Relations" immediate="true" update="mainPanel,fields,:soso,:pageLocations">
<f:param name="relationTab" value="active"/>
<f:param name="pageHeaderTitle" value="Fields Relations"/>
</p:commandLink>
</li>
</ul>
</div>
</h:panelGroup>
</h:panelGroup>
<h:panelGrid id="fields" width="100%">
<h:panelGroup layout="block" rendered="#{param.propertyTab == 'active' || default == 'active' }">
<ui:include src="property/properties.xhtml"></ui:include>
</h:panelGroup>
<h:panelGroup layout="block" rendered="#{param.typeTab == 'active'}">
<ui:include src="type/types.xhtml"></ui:include>
</h:panelGroup>
<h:panelGroup layout="block" rendered="#{param.relationTab == 'active'}">
<ui:include src="fields-relations.xhtml"></ui:include>
<h:commandButton value="Create" actionListener="#{fieldsRelationsController.createRelations()}" >
<f:ajax listener="#{fieldsRelationsController.createRelations()}"/>
</h:commandButton>
</h:panelGroup>
</h:panelGrid>
</h:form>
</ui:define>
It's because those panel groups are conditionally rendered based on a request parameter which is not present anymore in the subsequent POST request initiated by the command button.
When JSF processes the POST request, the rendered condition is also re-evaluated. Due to lack of the request parameter, it evaluates false, so the command button component won't be processed, so the associated action won't be invoked.
To fix this, you need to pass the request parameter responsible for calculating the result of the rendered attribute in a <f:param> of the command button.
<h:commandButton value="Create" action="#{fieldsRelationsController.createRelations}">
<f:ajax />
<f:param name="relationTab" value="active"/>
</h:commandButton>
(note that I've replaced the actionListener by action and removed the double f:ajax listener as well, I don't know what you were thinking, but I'll assume it to be a leftover of unthoughtful shoots in the dark)
See also:
commandButton/commandLink/ajax action/listener method not invoked or input value not updated - point 5.
I have the following Facelet page:
<ui:define name="content">
<h:form id="selectReport">
<div>
<h:selectOneMenu value="#{reportsController.selectedReport}">
<f:selectItems value="#{reportsController.reportsList}"/>
</h:selectOneMenu>
</div>
<div>
<h:commandButton value="Ir al reporte"
action="#{reportsController.goToReport}"/>
</div>
</h:form>
<h:form id="dateRangeSetupForm"
rendered="#{reportsController.showDateRangeSetupForm}">
<div>
<h:outputLabel value="Desde:"/>
<h:inputText id="fromDate"
value="#{reportsController.fromDate}"/>
</div>
<div>
<h:outputLabel value="Hasta:"/>
<h:inputText id="toDate"
value="#{reportsController.toDate}"/>
</div>
</h:form>
<h:form id="billOfLadingSetupForm"
rendered="#{reportsController.showBillOfLadingSetupForm}">
<div>
<h:outputLabel value="# Factura:"/>
<h:inputText id="invoiceNumber"
value="#{reportsController.invoiceNumber}"/>
</div>
</h:form>
<h:form id="submitForm">
<h:commandButton id="processReport" value="Generar Reporte"
action="#{reportsController.processReport}"/>
<h:commandButton id="goBack" value="Regresar"
action="mainMenu"/>
</h:form>
</ui:define>
In which I let the user select a report, and render a form to setup parameters depending on the report. The problem is that when I render for example the billOfLadingSetupForm and fill the inputText, then click on the processReport button the invoiceNumber property of my bean is not updated, it is set to null.
I have noticed that if I type Return after filling the inputText and then click the processReport button the property does get updated. This is strange I haven't face this problem before. Do you have any idea why this happens?
Whenever a form get submitted, then only the data inside that form will be sent. The data of the other forms won't be sent. That's by HTML specification. You need to put all inputs and buttons which belongs to each other inside the same <h:form>. Replace all your splitted dateRangeSetupForm, billOfLadingSetupForm and submitForm forms by <h:panelGroup> and put them all inside one and same <h:form>.
Something like this:
<ui:define name="content">
<h:form>
<div>
<h:selectOneMenu value="#{reportsController.selectedReport}">
<f:selectItems value="#{reportsController.reportsList}"/>
</h:selectOneMenu>
</div>
<div>
<h:commandButton value="Ir al reporte" action="#{reportsController.goToReport}"/>
</div>
</h:form>
<h:form>
<h:panelGroup id="dateRangeSetupForm" rendered="#{reportsController.showDateRangeSetupForm}">
<div>
<h:outputLabel value="Desde:"/>
<h:inputText id="fromDate" value="#{reportsController.fromDate}"/>
</div>
<div>
<h:outputLabel value="Hasta:"/>
<h:inputText id="toDate" value="#{reportsController.toDate}"/>
</div>
</h:panelGroup>
<h:panelGroup id="billOfLadingSetupForm" rendered="#{reportsController.showBillOfLadingSetupForm}">
<div>
<h:outputLabel value="# Factura:"/>
<h:inputText id="invoiceNumber" value="#{reportsController.invoiceNumber}"/>
</div>
</h:panelGroup>
<h:commandButton id="processReport" value="Generar Reporte" action="#{reportsController.processReport}"/>
<h:commandButton id="goBack" value="Regresar" action="mainMenu"/>
</h:form>
</ui:define>
Make sure that the bean is put in the view scope. Otherwise the conditions for the rendered attribute won't be preserved. See also commandButton/commandLink/ajax action/listener method not invoked or input value not updated