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
Related
I'm opening dialog1 from which I open dialog2, each have their own forms which are not nested in each other.
When I show dialog2 from a button inside the dialog1 form, submitting the dialog2 validates the dialog1 form - I do not want this.
When I show dialog2 from a button outside the dialog1 form, submitting the dialog2 doesn't run the dialog1 forms' validation.
I tested it on Primefaces 8.0 and 10.0.RC1, it behaves the same.
Why is this happening? Why does it matter where I show the dialog from?
Thank you.
sample 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>
<ui:composition
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
template="/template.xhtml">
<ui:define name="content">
<p:dialog appendTo="#(body)" widgetVar="dialog1" modal="true" header="dialog1"
showEffect="clip" closeOnEscape="true"
hideEffect="clip" responsive="true" width="700px" focus=":submitButtonForm:submitButton"
height="500">
<p:remoteCommand name="showDialog2" action="PF('dialog2').show();"/>
<h:form id="form1">
<p:outputPanel>
<p:outputLabel for="required1" value="dialog1value"/>
<p:inputText id="required1" required="true" value="#{test.dialog1value}"/>
<p:outputLabel for="dialog2value" value="dialog2value"/>
<p:inputText id="dialog2value" required="true" value="#{test.dialog2value}"/>
</p:outputPanel>
<p:commandButton value="show dialog2 from within form1 of dialog1 (dialog2 Submit then validates form1)"
onclick="PF('dialog2').show();"/>
</h:form>
<p:commandButton value="show dialog 2 from body of dialog1 (dialog2 Submit then DOES NOT validate form1)"
onclick="PF('dialog2').show();"/>
<f:facet name="footer">
<h:form id="submitButtonForm">
<p:commandButton partialSubmit="true"
id="submitButton" value="Submit" actionListener="#{test.dialog1Submit}"
update=":form1" process=":submitButtonForm,:form1"
style="float:right;margin-bottom: 20px;"/>
</h:form>
</f:facet>
</p:dialog>
<p:dialog appendTo="#(body)" widgetVar="dialog2" modal="true" header="dialog2"
showEffect="clip" closeOnEscape="true"
hideEffect="clip" responsive="true" width="700px" focus=":submitButtonForm:submitButton"
height="500">
<h:form id="form2">
<p:outputPanel>
<p:outputLabel for="required2" value="dialog2value"/>
<p:inputText id="required2" required="true" value="#{test.dialog2value}"/>
</p:outputPanel>
</h:form>
<f:facet name="footer">
<h:form id="submitButtonForm2">
<p:commandButton partialSubmit="true"
id="submitButton2" value="Submit" actionListener="#{test.dialog2Submit}"
update=":form2,:form1" process=":submitButtonForm2,:form2"
style="float:right;margin-bottom: 20px;"/>
</h:form>
</f:facet>
</p:dialog>
<p:commandButton value="show dialog 1" oncomplete="PF('dialog1').show();"/>
</ui:define>
</ui:composition>
</html>
import lombok.Getter;
import lombok.Setter;
import org.springframework.stereotype.Component;
import javax.faces.view.ViewScoped;
#Component
#ViewScoped
public class Test {
#Getter
#Setter
private String dialog1value, dialog2value;
public void dialog1Submit() {
System.out.println("dialog1 submitted");
}
public void dialog2Submit() {
System.out.println("dialog2 submitted");
}
}
Change your commandButton to return false to stop it from Submitting the AJAX form...
<p:commandButton
value="show dialog 2 from body of dialog1 (dialog2 Submit then DOES NOT validate form1)"
onclick="PF('dialog2').show();return false;"/>
This question already has answers here:
Clear JSF form input values after submitting
(5 answers)
Closed 5 years ago.
After you have made a registration, it clears the form normally, but when I turn the page and come back to the registration page, the fields are filled with the values I have registered before. The scoped I'm using is #ViewScoped.
Registration page..
Realizar Emprestimos
<h:form id="form" prependId="false">
<p:messages id="msgs"/>
<p:toolbar>
<f:facet name="left">
<p:toolbarGroup>
<p:commandButton value="Confirmar" action="#{empMB.inserir}" process="#this"
update="form:list_publicacao" ajax="false">
<f:ajax render="form:list_publicacao" resetValues="true"/>
</p:commandButton>
</p:toolbarGroup>
</f:facet>
<f:facet name="right">
<p:toolbarGroup>
<p:commandButton value="Cancelar" action="#{empMB.limparCampos()}"
immediate="true">
<f:ajax render="#form" resetValues="true"/>
</p:commandButton>
</p:toolbarGroup>
</f:facet>
</p:toolbar>
<f:ajax event="blur">
<h:panelGrid id="p1" columns="4" layout="grid">
<p:outputLabel value="Usuário: " for="usuario" />
<p:selectOneMenu id="usuario" effect="fade" filter="true"
filterMatchMode="contains"
value="#{empMB.emprestimo.usuario.idUsuario}" required="true"
requiredMessage="Selecione um usuário">
<f:selectItem itemLabel="selecione um usuario"
noSelectionOption="true" />
<f:selectItems value="#{usuarioMB.todosUsuarios}" var="usu"
itemValue="#{usu.idUsuario}" itemLabel="#{usu.nomeUsuario}" />
</p:selectOneMenu>
<p:outputLabel value="Data Emprestimo: " for="dataEmprestimo" />
<p:calendar id="dataEmprestimo"
value="#{empMB.emprestimo.dataEmprestimo}" effect="fold"
navigator="true" required="true"
requiredMessage="Inserir uma data do emprestimo"
pattern="dd/MM/yyyy" title="Data do Emprestimo">
<f:convertDateTime pattern="dd/MM/yyyy" locale="pt_BR"
timeZone="America/Sao_Paulo" />
</p:calendar>
</h:panelGrid>
<h:panelGrid id="p2" columns="2" layout="grid">
<p:outputLabel value="Publicacao: " for="publicacao" />
<p:selectOneMenu label="Publicação:" id="publicacao" effect="fade"
filter="true" filterMatchMode="contains"
value="#{empMB.emprestimo.publicacao.publicacaoId}">
<f:selectItem itemLabel="Selecione uma publicação"
noSelectionOption="true" />
<f:selectItems value="#{pubMB.publicacoesDisponiveis}" var="pub"
itemValue="#{pub.publicacaoId}" itemLabel="#{pub.titulo}" />
<f:ajax listener="#{empMB.setlistPublicacao()}"
render="list_publicacao msgs publicacao" />
</p:selectOneMenu>
</h:panelGrid>
<h2 style="font-size: 1.9em; margin-top: 3%;">Publicações
selecionadas</h2>
<p:dataTable reflow="true" id="list_publicacao"
value="#{empMB.listPublicacaoDesejada}" var="pub"
emptyMessage="Suas publicações aparecerão aqui.">
<ui:include src="/colunasPublicacoes.xhtml" />
</p:dataTable>
</f:ajax>
</h:form>
</ui:define>
Method..
public Emprestimo inserir() {
System.out.println(getListPublicacaoDesejada().size());
try {
for (int i = 0; i < getListPublicacaoDesejada().size(); i++) {
Calendar dataPrevista = Calendar.getInstance();
dataPrevista.setTime(emprestimo.getDataEmprestimo());
dataPrevista.add(Calendar.DAY_OF_MONTH,
Integer.parseInt(JSFHelper.getExternalContext().getInitParameter("previsaoDevolucao")));
emprestimo.setFuncionarioEmprestimo("usuarioteste08");
emprestimo.setDataPrevistaDevolucao(dataPrevista.getTime());
emprestimo.getPublicacao().setPublicacaoId(emprestimo.getListPublicacao().get(i).getPublicacaoId());
emprestimoFacade.inserir(emprestimo);
}
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Emprestimo(s)", "realizado(s) com sucesso!");
RequestContext.getCurrentInstance().showMessageInDialog(message);
emprestimo = new Emprestimo();
return emprestimo;
} catch (DAOException e) {
e.printStackTrace();
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Atenção", "Erro ao realizada emprestimo");
RequestContext.getCurrentInstance().showMessageInDialog(message);
return null;
}
}
Thank you very much in advance.
Solved, I added the PostConstruct method at the beginning of MB.
#PostConstruct
public void init() {
emprestimo = new Emprestimo();
}
I am using primefaces 5.2 dialog framework to popup a dialog from my backing bean. That dialog with a simple login form.
main.xhtml as:
<h:form prependId="false">
......
<p:commandButton value="#{apps['application.sec.login']}" immediate="true" actionListener="#{loginControlBean.fireLoginDialog}" icon="fa fa-fw fa-sign-in" />
.....
</h:form>
backing bean LoginControlBean.java as:
#Named(value = "loginControlBean")
#SessionScoped
public class LoginControlBean implements Serializable{
private static final Logger logger =Logger.getLogger(LoginControlBean.class.getName());
#Inject
private StaffSession staffSession;
/* ... get/set pairs ...*/
......
public void fireLoginDialog() {
Map<String,Object> options = new HashMap<String, Object>();
options.put("modal", true);
options.put("draggable", false);
options.put("resizable", false);
RequestContext.getCurrentInstance().openDialog("/sec/login", options, null);
}
.......
public void login(ActionEvent event) {
logger.info("Passed in information: User name: "+staffSession.getTempUserName()+" Password: "+staffSession.getTempPassword());
.......
}
login.xhtml as:
<?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://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet library="css" name="default.css"/>
<h:outputStylesheet library="css" name="cssLayout.css"/>
<title>Staff Login</title>
</h:head>
<h:body>
<ui:composition>
<h:form id="loginform">
<p:growl id="logingrowl" sticky="true" showDetail="true" life="60000" />
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="username" value="#{apps['application.sec.username']}" />
<p:inputText id="username" value="#{staffSession.tempUserName}" required="true" label="username" />
<h:outputLabel for="password" value="#{apps['application.sec.password']}" />
<p:password id="password" value="#{staffSession.tempPassword}" required="true" label="password" />
<f:facet name="footer">
<p:commandButton process="#form" value="Login" update="logingrowl" actionListener="#{loginControlBean.login}"/>
</f:facet>
</h:panelGrid>
</h:form>
</ui:composition>
</h:body>
</html>
dialog popup properly and when I input user name and password, then hit login button. I got exception in my backend(server side) log as:
####<Nov 2, 2016 5:20:10 PM AEDT> <Info> <com.longz.ozssc.web.staff.LoginControlBean> <macmini16g.tweedheadstorage.com.au> <OzsscWEBServer> <[ACTIVE] ExecuteThread: '5' for queue: 'weblogic.kernel.Default (self-tuning)'> <<anonymous>> <> <49d77419-9b42-461a-92bb-25b06f512a63-0000001d> <1478067610444> <[severity-value: 64] [rid: 0] [partition-id: 0] [partition-name: DOMAIN] > <BEA-000000> <Passed in information: User name: null Password: null>
filled in fields in the form were bound to staffSession, but unfortunately, when I tried to access the values from backing bean staffSession, it is "null". Seems form submit is not working.
Any idea??
You didn't set the values of your input fields correctly.
value="#{staffSession.tempUserName}"
You need to add the bean to the values:
value="#{loginControllBean.staffSession.tempUserName}"
I have a problem with xforms, how refresh only rich:panel when I choose value from h:selectOneMenu :
<!--<h:form> call bean but--> <form><!--open start page-->
<h:selectOneMenu id="add" onchange="submit()" <!-- can't find context , error orbeon/java--> >
<!-- is not working <a4j:support event="onchange" actionListener="#{bean.action}"/> -->
<s:selectItems value="#{bean.List()}" var="message" itemValue="#{message}" label="#{message}" />
</h:selectOneMenu>
</form>
more Code JSF :
<form>
<rich:panel styleClass="DocumentBody" id="documentPanel"
name="panell" style="margin-top:10px; height:90px;">
<f:facet styleClass="documentHeader" name="header"></f:facet>
<div id="documentTest" class="actionButtons">
<div style="clear: both; height: 15px; width: 60px" />
<s:button id="addButton" value="#{messages['operation.save.button']}"
action="#{actionBean.generateNewName()}" reRender="confirm"
onclick="#{actionBean.generateNewName()};#{rich:component('confirm')}.show();return false;">
</s:button>
<s:button id="loadButton" value="#{messages['operation.load.button']}"
action="#{actionBean.loadDraft()}" reRender="documentTests,documentPanel,loadButton" />
<s:button id="deleteButton" value="#{messages['operation.delete.button']}"
action="#{actionBean.deleteDraft()}" reRender="documentTests,documentPanel,deleteButton" />
</div>
</rich:panel>
</form>
<h:form style="margin: 0;">
<h:selectOneMenu id="messageTypeAdd"
style="margin-right:5px; margin-top:-30px;margin-left:90px;"
valueChangeListener="#{actionBean.documentTestChange}"
enableManualInput="false" selectFirstOnUpdate="true"
directInputSuggestions="true" onchange="submit()">
<!-- submit() rerender all page, but i try refresh only modalPanel id="confirm" -->
<s:selectItems value="#{actionBean.getdocumentTestList()}"
var="message" itemValue="#{message}" label="#{message}" />
<!--a4j and f:ajax is not work, i try update JSF 1.2 to 2.0 -->
</h:selectOneMenu>
</h:form>
<rich:modalPanel id="confirm" autosized="true" width="300">
<f:facet name="header"></f:facet>
<rich:messages style="color:red;" globalOnly="true" />
<a4j:outputPanel ajaxRendered="true">
<h:panelGrid>
<h:panelGrid columns="2">
<h:outputText value="#{messages['report.name.label']}" />
<h:inputText id="newDraftNameInput" value="#{actionBean.newDraftName}"
valueChangeListener="#{actionBean.newDraftNameChange}">
</h:inputText>
</h:panelGrid>
</h:panelGrid>
</a4j:outputPanel>
</rich:modalPanel>
I'm trying to create a form where FirstName is a required field to put in order to submit the form (going to add other validations once I can figure out what's wrong with this error):
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" 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:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>Register as a Voter</title>
</h:head>
<h:body>
Please fill out all information below to register as a voter.
<br/>
<h:form id = "form" >
<h:outputLabel value = "First Name:"/>
<h:inputText value = "#{voterBean.firstName}">
<h:validateRequired/>
</h:inputText>
<br/>
<h:outputLabel value = "Last Name:"/>
<h:inputText value = "#{voterBean.lastName}"/>
<br/>
<h:outputLabel value = "Address:"/>
<h:inputText value = "#{voterBean.address}"/>
<br/>
<h:outputLabel value = "City:"/>
<h:inputText value = "#{voterBean.city}"/>
<br/>
<h:outputLabel value = "State"/>
<h:inputText value = "#{voterBean.state}"/>
<br/>
<h:outputLabel value = "Zip:"/>
<h:inputText value = "#{voterBean.zip}"/>
<br/>
<h:outputLabel value = "Phone:"/>
<h:inputText value = "#{voterBean.phone}"/>
<br/>
<h:outputLabel value = "Affiliation:"/> <br/>
<h:selectOneRadio value="#{voterBean.affil}"><br/>
<f:selectItem itemValue="Democrat" itemLabel="Democrat" />
<f:selectItem itemValue="Green Party" itemLabel="Green Party" />
<f:selectItem itemValue="Liberterian" itemLabel="Liberterian" />
<f:selectItem itemValue="Republican" itemLabel="Republican" />
<f:selectItem itemValue="Unafilliated" itemLabel="Unafilliated" />
</h:selectOneRadio>
<br/>
<h:commandButton id = "Submit" value = "Submit" action = "Results"/>
</h:form>
</h:body>
</html>
However, when I deploy this code and get to this xhtml file I get an error that says
"/Register.xhtml #24,23 Tag Library supports namespace: http://java.sun.com/jsf/html, but no tag was defined for name: validateRequired"
I've tried reading for solutions for this error on stackoverflow but I can't figure out what's the problem.
I believe I'm doing this correctly....
The "validateRequired"'s tag is related the core namespace rather than the html one. Changing this prefix to this <f:validateRequired /> should fix the problem.
Alternativly, you can make use of required="true" inside the input component tag. Both of them do the same task.