I have a form with a button that opens a Rich:modalPanel with another form inside and two buttons at bottom; Close and Save.
Close: executes onclick="#{rich:component('mp')}.hide() and hides the modalPanel.
Save: validates the fields of the forms shows an error if is not complete, if the form is correct saves in db. reset the form but not close the Rich:modalPanel.
I want to close the Rich:modalPanel only if the form is ok and saves but i cant do it. I tried with:
Inserting Javascript:
<a4j:commandButton value="${msg.guardar}" styleClass="boton" reRender="personaForm" action="#{persona.guardarAuxiliar}" onclick="#{rich:component('mp')}.hide()"/><br />
and
<a4j:commandButton value="${msg.guardar}" styleClass="boton" reRender="personaForm" action="#{persona.guardarAuxiliar}" oncomplete="#{rich:component('mp')}.hide()"/><br />
Using only RichFaces:
<a4j:commandButton value="${msg.guardar}" styleClass="boton" reRender="personaForm" action="#{persona.guardarAuxiliar}">
<rich:componentControl for="mp" operation="hide" event="onclick" />
</a4j:commandButton><br />
and
<a4j:commandButton value="${msg.guardar}" styleClass="boton" reRender="personaForm" action="#{persona.guardarAuxiliar}">
<rich:componentControl for="mp" operation="hide" event="oncomplete" />
</a4j:commandButton><br />
But this codes always closes (or hide) the modalPanel, not only if the save is complete. Is it another way to close this modalPanel only if the save is ok?.
The Error popup is:
<a4j:outputPanel ajaxRendered="true">
<h:messages id="error" styleClass="error"></h:messages>
</a4j:outputPanel>
<rich:modalPanel id="panel2" width="350" height="100" zindex="4000" showWhenRendered="${persona.hayErrores || persona.exito}">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="${msg.error}" rendered="#{persona.hayErrores}"></h:outputText>
<h:outputText value="${msg.info}" rendered="#{persona.exito}"></h:outputText>
</h:panelGroup>
</f:facet>
<f:facet name="controls">
<h:panelGroup>
<h:graphicImage value="/estilos/general/img/iconos/close.png" style="cursor:pointer" id="hidelink2"/>
<rich:componentControl for="panel2" attachTo="hidelink2" operation="hide" event="onclick"/>
</h:panelGroup>
</f:facet>
<a4j:outputPanel ajaxRendered="true">
<h:outputText value="#{persona.listaErrores}" rendered="#{persona.hayErrores}" styleClass="error"/>
<h:outputText value="#{msg.personaExito}" rendered="#{persona.exito}"/>
</a4j:outputPanel>
</rich:modalPanel>
Solved:
Just adding another rich:componentControl with conditions in popup message showing validation.
// If its wrong, only closes this popup
<rich:componentControl for="panel2" attachTo="hidelink2" operation="hide" event="onclick" rendered="#{persona.hayErrores}" />
// If its ok, closes this popup and 'mp' modalPanel
<rich:componentControl for="panel2,mp" attachTo="hidelink2" operation="hide" event="onclick" rendered="#{persona.exito}" />
You can use oncomplete attribute of a4j:commandButton, like
<a4j:commandButton action="#{persona.guardarAuxiliar}"
oncomplete="Richfaces.hideModalPanel('mp')"
value="#{msg.guardar}" reRender="personaForm" />
or with condition
oncomplete="if (#{!yourAction.hasErrors}) Richfaces.hideModalPanel('mp')"
Classical case with checking validation errors
oncomplete="if (#{facesContext.maximumSeverity == null}) {Richfaces.hideModalPanel('mp');}"
Related
I am using PF v.5.3.5 and JSF v.2.2.8. It is a frequent topic in SO. I noticed that there is a bug in PF v.5.3.5 documentation related to the appendTo attribute.
1st approach
The p:confirmDialog is rendered and commandbuttons are rendered but actions does not work and message is not rendered if it is placed inside of nested h:form.
2st approach
If I place this dialog outside of main h:form it is not rendered at all also if I add the global="true" attribute.
3st approach
The p:confirmDialog is rendered and commandbuttons are rendered but actions does not work and message is rendered if the nested h:form is removed.
<h:form>
...
<p:confirmDialog id="askSessionDialog1" widgetVar="askSessionDialog1" severity="alert"
appendTo="#(body)" rendered="#{treeData.askSessionDialogRendered}" visible="#{treeData.askSessionDialogRendered}">
<h:form>
<f:facet name="message">
<h:outputText value="#{msg.WEB_ADMIN_PAGES_TREESEGMENT_NOSESSION}" escape="false"/>
</f:facet>
<p:commandButton value="#{msg.WEB_BUTTONS_OK}" action="#{treeData.save(false, true)}" icon="fa fa-check"
update="#(form)" type="button" />
<p:commandButton value="#{msg.WEB_BUTTONS_CANCEL}" action="#{treeData.setAskSessionDialogRendered(false)}"
icon="fa fa-close" onclick="PF('askSessionDialog1.hide()')" update="#(form)" type="reset" />
</h:form>
</p:confirmDialog>
...
</h:form>
BECKEND PART
setAskSessionDialogRendered(true);
RequestContext.getCurrentInstance().update("treeSegmentForm askSessionDialog askTurnOffDialog askSessionDialog1 askTurnOffDialog1");
Thanks in advance for constructive posts and comments.
SOLVED
This is the best approach that works for me now.
<h:form>
...
<p:confirmDialog id="askSessionDialog" widgetVar="askSessionDialog" severity="alert"
appendTo="#(body)" rendered="#{treeData.askSessionDialogRendered}" visible="#{treeData.askSessionDialogRendered}">
<f:facet name="message">
<h:outputText value="#{msg.WEB_ADMIN_PAGES_TREESEGMENT_NOSESSION}" escape="false"/>
</f:facet>
<h:form>
<p:commandButton value="#{msg.WEB_BUTTONS_OK}" icon="fa fa-check" type="button" accesskey="o">
<p:ajax event="click" listener="#{treeData.save(false, true)}" oncomplete="PF('askSessionDialog').hide()"
update="#(form)" />
</p:commandButton>
<p:commandButton value="#{msg.WEB_BUTTONS_CANCEL}" icon="fa fa-close" type="reset" accesskey="c">
<p:ajax event="click" listener="#{treeData.setAskSessionDialogRendered(false)}"
onsuccess="PF('askSessionDialog').hide()" update="#(form)" />
</p:commandButton>
</h:form>
</p:confirmDialog>
...
</h:form>
BACKEND
setAskSessionDialogRendered(true);
RequestContext.getCurrentInstance().update("treeSegmentForm");
SPACIAL THANKS TO: #YagamiLight
He helped me to kick off my solution.
primefaces mobile commandLink action does not work, it's not loading the page with id="station1". f:setPropertyActionListener is work and call setSelectedStation() method .
<pm:page id="fastStationPage">
<pm:header title="Fast Charging Station" swatch="b" ></pm:header>
<pm:content>
<h:form id="stationsDetailsForm">
<p:growl id="messages" showDetail="true" />
<p:dataList value="#{navigationViewImpl.fastStationList}" var="station" type="ordered">
<p:commandLink value="#{station.name}" action="pm:station1?transition=slide" update=":station1:stationDetail">
<f:setPropertyActionListener value="#{station}" target="#{navigationViewImpl.selectedStation}" />
</p:commandLink>
</p:dataList>
</h:form>
</pm:content>
</pm:page>
<pm:page id="station1">
<pm:content>
<h:outputText id="stationDetail" value="#{navigationViewImpl.selectedStation.name}" escape="false"/>
</pm:content>
</pm:page>
public void setSelectedStation(StationDTO selectedStation) {
this.selectedStation = selectedStation;
}
I got answer. I not configure face-config.xml file. I am not add navigation-handler
<application>
<navigation-handler>
org.primefaces.mobile.application.MobileNavigationHandler
</navigation-handler>
</application>
i have to edit a row in a table using rich faces 4 and modal panel. I am new one so please tell me in details and i know to make a table in rich faces. i already searched so many things but not getting any fruitful
See answer for question "Richfaces: show details in popup [commandbutton, action and popupPanel]". It works in RichFaces 4.x with rowClick.
Or here is example with commandLink:
<a4j:commandLink action="#{actionBean.setupTransactionDetails}"
event="onclick" render="transactionDetails"
oncomplete="#{rich:component('transactionDetails')}.show()"
styleClass="rich-link">
<h:outputText value="#{res.transactionType}" />
<f:setPropertyActionListener value="#{res.transactionId}"
target="#{profile.transactionId}" />
</a4j:commandLink>
But I prefer updated version like this:
<a4j:jsFunction name="showDetail" action="#{actionBean.setupTransactionDetails}"
oncomplete="#{rich:component('transactionDetails')}.show();"
render="transactionDetails">
<a4j:param name="id" assignTo="#{profile.transactionId}"
converter="javax.faces.Long" />
</a4j:jsFunction>
<rich:dataTable id="txnTable" rows="#{referenceData.recordsPerPage}"
style="width: 100%" rowClasses="oddrow, evenrow"
value="#{profile.transactions}" var="res" sortMode="single">
<h:column width="110">
<f:facet name="header">
<h:outputText value="#{msg.transactionType}" />
</f:facet>
<a4j:commandLink onclick="showDetail('#{res.transactionId}');"
value="#{res.transactionType}" />
</h:column>
</rich:dataTable>
<rich:popupPanel id="transactionDetails" autosized="true"
style="max-height:600px;">
<!-- f:facet name="header" and f:facet name="controls" here -->
<h:form id="transactionDetailsForm">
<!-- some details here -->
</h:form>
</rich:popupPanel>
Profile backing bean
private Long transactionId; // + getter and setter
Action backing bean
public void setupTransactionDetails() {
Transaction txn = DAO.getInstance().get(Transaction.class, getProfile().getTransactionId());
transactionForm.setup(txn);
}
In case if you use EL 2.2 (or higher) you can call action bean method with parameter.
I have a form with jsf2 and primefaces that contains a submit button that managed two things:
First: form validation with the update attribute and second launching a confirmation dialog box when validation succeeded and all of this are managed by:
update="myfieldset display"
so my problem is that when I click into the button validation: if validation don't succeeded : validation messages are displayed in the form : ok
but if the validation succeeded I must click a second time to display dialog box
anyone know how to solve this problem there?
<!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:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<script type="text/javascript">
<!--
function effacer(formulaire){
for (var i=0; i<formulaire.length; i++){
if (formulaire.elements[i].type=="input" || formulaire.elements[i].type=="textarea" ) {formulaire.elements[i].value="";}
}
document.getElementById('contenu_input').value="";
}
//-->
</script>
<body>
<ui:composition template="./template_utilisateur.xhtml">
<ui:define name="content">
<h:form id="form" prependId="false" >
<p:fieldset id="myfieldset" legend="Nouveau message">
<p:messages id="msgs"/>
<h:panelGrid columns="3" style="margin-bottom:10px">
<h:outputLabel for="title" value="Titre : *"/>
<p:inputText id="title" style="width:340px;" value="#{messageController.titre}" required="true" requiredMessage="veuillez saisir un titre" label="Titre">
<f:validateLength minimum="10" />
</p:inputText>
<p:message for="title" display="icon"/>
<h:outputLabel for="city" value="Destinataire : *" />
<p:selectOneMenu id="city" value="#{messageController.destinataire}" label="Destinataire" required="true" requiredMessage="veuillez choisir au moins un destinataire" >
<f:selectItem itemLabel="Séléctionner déstinataire" itemValue="" />
<f:selectItems value="#{messageController.users}" />
</p:selectOneMenu>
<p:message for="city" id="msgSurname3" display="icon"/>
<h:outputLabel for="comm" value="Lié a La commande N° : " />
<p:selectOneMenu id="comm" label="Commande" value="#{messageController.idComm}" >
<f:selectItem itemLabel="Aucune commande" itemValue="" />
<f:selectItems value="#{messageController.id_c}" />
</p:selectOneMenu>
<p:message for="comm" id="msgSurnamse3" display="icon"/>
</h:panelGrid>
<h:outputLabel for="contenu" value="Contenu : *" />
<h:panelGrid columns="2">
<p:editor id="contenu" widgetVar="editer" value="#{messageController.message}" width="600" required="true" requiredMessage="Veuillez saisir le contenu du message" >
<f:validateLength minimum="10" />
</p:editor>
<p:message for="contenu" id="editorm" display="icon"/>
</h:panelGrid>
<h:panelGrid columns="3">
<p:commandButton id="submitButton" value="envoyer" update="myfieldset display" onclick="#{messageController.retournerDialog()}" icon="ui-icon-disk" />
<p:commandButton id="clearButton" type="reset" value="initialiser" onclick="editer.clear()"
icon="ui-icon-close" />
</h:panelGrid>
</p:fieldset>
<p:dialog header="Confirmation" widgetVar="dlg" showEffect="fade" hideEffect="fade" modal="true">
<h:panelGrid id="display" columns="1" cellpadding="4">
<h:outputText value="Titre : " />
<h:outputText value="#{messageController.titre}" id="model"/>
<h:outputText value="Déstinataire :" />
<h:outputText value="#{messageController.destinataire}" id="year"/>
<h:outputText value="Lié à la commande N° : " />
<h:outputText value="#{messageController.idComm}" id="manufacturer"/>
<h:outputText value="Contenu :" />
<h:outputText id="displxcay" value="#{messageController.message}" escape="false" />
</h:panelGrid>
</p:dialog>
</h:form>
</ui:define>
</ui:composition>
</body>
</html>
and here the method to launch the dialog
public String retournerDialog(){
String retour = "";
if( getDestinataire() != "" && getMessage()!= "" && getTitre()!="" && getMessage().length()>9 && getTitre().length()>9){
retour="dlg.show()";
}
return retour;
}
thank you in advance
Update: thank you BalusC for your detailed response, I tested both of your answers but they don't work
here is the code of the button :
<p:commandButton id="submitButton" value="envoyer" update="myfieldset, display" action="#{messageController.showDialog}" icon="ui-icon-disk" />
and the managedBean :
private boolean showDialog;
public void showDialog() {
showDialog = true;
}
public boolean isShowDialog() {
return showDialog;
}
and with this code above the dialog doesn't appear even if validation is succeeded
: I think because action must return outcome string not boolean
and when I make :
<p:commandButton id="submitButton" value="envoyer" update="myfieldset, display" onclick="dlg.show();" icon="ui-icon-disk" />
it appear even if the validation failed
and to remind you
when I put a method above like this :
<p:commandButton id="submitButton" value="envoyer" update="myfieldset, display" onclick="#{messageController.retournerDialog()}" icon="ui-icon-disk" />
I have to click twice (I think one for validation and one for displaying dialog)for the dialog is displayed
also in the official documentation : they use this dialog with onclick attribute
do you have any other idea
<rich:dataTable id="companyList" var="company"
value="#{companyList.resultList}"
rowClasses="odd-row, even-row"
rendered="#{not empty companyList.resultList}">
<rich:column width="25px" style="text-align:center;">
<f:facet name="header">#{messages.Edit}</f:facet>
<a4j:commandLink reRender="companyPanel"
oncomplete="#{rich:component('companyPanel')}.show()"
style="align: center;"> <f:setPropertyActionListener target=
"#{companyHome.instance}"
value="#{company}" />
<rich:toolTip value="#{messages.Edit}" />
</a4j:commandLink>
</rich:column>
<h:column>
<f:facet name="header">
#{messages.companyName}</f:facet>
#{company.companyName}
</h:column>
</rich:dataTable>
Hi I have some problem my rich datatable. All operation work normally , I search some data in dataTable ,I get true list in datatable but, If I try to update some data in column , wrong instance coming. Forexample , I choose banana which name is my data , but it brings before searching data not bring banana. I do not understand why. Sorry my english.
Not sure but, have you tried this
<f:setPropertyActionListener target="#{companyHome.id}" value="#{company.id}" />
instead of
<f:setPropertyActionListener target="#{companyHome.instance}" value="#{company}" />