I got problem with non displaying validation error message on my form, when I'm using templates.
It does validation ok, as I can see I am not forwarded to next page, but I dont see error message.
When I try same code without defining layout template parts it prints message.
This is my form code:
<h:form>
<h:panelGrid columns="2">
<h:outputLabel for="mname">Username </h:outputLabel>
<h:inputText required="true" requiredMessage="Username is required.">
</h:inputText>
<h:commandButton value="Submit"></h:commandButton>
</h:panelGrid>
</h:form>
And this is my code when I'm defining content part:
<!-- Content -->
<ui:define name="content">
<h:form>
<h:panelGrid columns="2">
<h:outputLabel for="mname">Username </h:outputLabel>
<h:inputText required="true" requiredMessage="Username is required.">
</h:inputText>
<h:commandButton value="Submit"></h:commandButton>
</h:panelGrid>
</h:form>
</ui:define>
Anyone got reason why wouldn't I see error message when I'm defining my layout page.
This is my layout.xhtml content part.
<div id="content">
<ui:insert name="content">
<ui:include src="/template/content.xhtml" />
</ui:insert>
</div>
Eventually you will need a h:message tag.. the requiredMessage is a tip for the framework on what to print in the message tag.
So you should have a set up like:
<h:form>
<h:message showSummary="true" showDetail="false"
id="errorsMessages"
for="txt"/>
<h:panelGrid columns="2">
<h:outputLabel for="mname">Username </h:outputLabel>
<h:inputText id="txt" required="true" requiredMessage="Username is required.">
</h:inputText>
<h:commandButton value="Submit"></h:commandButton>
</h:panelGrid>
</h:form>
Related
I want to implement Primefaces wizard with finish button at the bottom. Example code:
<h:form>
<p:growl id="growl" sticky="true" showDetail="true"/>
<p:wizard flowListener="#{newSensor.onFlowProcess}">
<p:tab id="personal" title="General">
<p:panel header="Sensor Details">
<p:messages />
<h:panelGrid columns="2" columnClasses="label, value">
......
<h:outputText value="Enabled " />
<h:selectBooleanCheckbox value="#{newSensor.sensor.enabled}" />
</h:panelGrid>
</p:panel>
</p:tab>
<p:tab id="confirm" title="Confirmation">
<p:panel header="Confirmation">
<h:panelGrid id="confirmation" columns="3" columnClasses="grid,grid,grid">
<h:panelGrid columns="2" columnClasses="label, value">
......
<h:outputText value="Age: " />
<h:outputText value="#{newSensor.sensor.enabled}" styleClass="outputLabel"/>
</h:panelGrid>
</h:panelGrid>
<p:commandButton value="Submit" actionListener="#{newSensor.save}" update="growl" process="#this"/>
</p:panel>
</p:tab>
</p:wizard>
</h:form>
Want to get this visual result:
How I can get this visual result?
I think it's best to implement your own UI for the navigation and just control when the Submit button will be displayed.
First hide the navigation bar as such:
<p:wizard showNavBar="false" widgetVar="wiz">
...
</p:wizard>
Then just create some codes for the NEXT,BACK,SUBMIT, ETC.
<p:outputPanel id="updateAsNeeded">
<h:outputLink value="#" onclick="PF('wiz').next();">Next</h:outputLink>
<h:outputLink value="#" onclick="PF('wiz').back();">Back</h:outputLink>
<p:commandButton value="Submit" rendered="#{bean.isEndReached}">Submit</p:commandButton>
</p:outputPanel>
Then you define a FlowListener to determine :
<p:wizard flowListener="#{bean.handleFlow}">
...
</p:wizard>
For your bean:
public String handleFlow(FlowEvent event) {
String currentStepId = event.getCurrentStep();
String stepToGo = event.getNextStep();
//check if stepToGo is on the last page
//endReached = true;
RequestContext.update("updateAsNeeded");
return event.getNextStep();
}
Hope this helps or guides you forward.
I would create a check input information about specified in:
http://www.primefaces.org/showcase/ui/message/messages.xhtml
I create a dataTable with a lot required field (inputText with attribute required="true") and a p:message into datatable section.
Problem is when I click on button to save data: I don't see alert message in my page but starting execution of associated bean.
Why?
My code in .xhtml is this:
<h:form>
<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
<p:dataTable var="myAtt"
value="#{myBean.attributes}"
rowIndexVar="myAttIndex">
<h:inputHidden value="#{myAtt.value}" rendered="#{myAtt.description == 'XXX'}" />
<p:column rendered="#{myAtt.description == 'XXX'}">
<h:outputText value="*" rendered="#{myAtt.required}" />
</p:column>
<p:column rendered="#{ myAtt.description == 'YYY'">
<p:fragment rendered="#{myAtt.description == 'ZZZ'">
<p:fragment rendered="#{myAtt.value == 'value1'}">
<p:inputText size="#{myAtt.maxLength}"
value="#{myAtt.value}"
rendered="#{myAtt.const == 't1'}"
required="true"
id="idText">
<p:ajax process="#this" event="change" update="#form"/>
</p:inputText>
<p:message for="idText"/>
</p:fragment>
</p:fragment>
</p:column>
</p:dataTable>
<br />
<p:commandButton value="Create" action="#{myBean.commit()}" process="#this" update=":MYPAGE"/>
Thanks.
You forgot to indicate an id for the h:form : <h:form id="myForm">
And in the update of the p:commandButton you have to indicate the id of the form : update=":MYPAGE :myForm"
EDIT
According to the PrimeFaces users guide 3.5, the attribute action will be called when the user clicks on the button.
I have a problem with tabView. The 1st tab should always display the same content (called search template which is identified with #{not curSearch.isClosable()}. All other tabs are search instances (identified with #{curSearch.isClosable()}
Here is the code:
<p:tabView id="searchTabViewId" var="curSearch" value="#{searchBL.searchInstances}"
activeIndex="#{searchBL.activeTabIndex}" styleClass="searchTabView">
<!-- search template tab -->
<ui:include src="/icarchive/sections/search/firstSearchTab.xhtml">
<ui:param name="curSearch" value="#{curSearch}" />
</ui:include>
<!-- search instances tabs -->
<ui:include src="/icarchive/sections/search/searchInstanceTab.xhtml">
<ui:param name="curSearch" value="#{curSearch}" />
</ui:include>
</p:tabView>
Unfortunately there are methods on the 1st tabs curSearch object called which are used on 2nd and following tabs only. If I do not use the ui:insert it does not change anything.
Anybody knows where is my fault?
Regards
Oliver
This works:
<p:tabView id="searchTabViewId" styleClass="searchTabView" activeIndex="#{searchBL.activeTabIndex}">
<!-- do the iteration over the search instances NOT in the tabView because this will not work with ui:include -->
<c:forEach items="#{searchBL.searchInstances}" var="curSearch">
<p:tab closable="#{curSearch.isCloseable()}">
<f:facet name="title">
<p:graphicImage library="images" name="search_tab.png" height="16" styleClass="tabImage"
rendered="#{not curSearch.isCloseable()}" />
<h:outputText value="#{curSearch.title}" />
</f:facet>
<!-- do not use 2 ui:includes here, the dynamic must be in the src attribute to get it work -->
<ui:include
src="#{curSearch.closeable ? '/sections/search/searchInstanceTab.xhtml' : '/sections/search/firstSearchTab.xhtml'}">
<ui:param name="curSearch" value="#{curSearch}" />
</ui:include>
</p:tab>
</c:forEach>
I had the same problem, only solution i found is wrap include in other component and clamp with render which one is displayed. For initial load if you have ids depending on content you will need to set id prefix so that it does not allow empty id fields:
<p:tabView id="tabsView" dynamic="true" cache="true"
value="#{TabViewController.tabView.openedTabs}" var="tabDefinition" activeIndex="#{TabViewController.tabView.activeIndex}">
<p:ajax event="tabClose" listener="#{TabViewController.onCloseTab}" update="tabsView"/>
<p:ajax event="tabChange" update="tabsView"/>
<p:tab id="tab#{tabDefinition.id}" title="#{tabDefinition.title}" closable="true" action="">
<f:facet name="title">
<h:outputText value="#{tabDefinition.title}"/>
</f:facet>
<p:outputPanel style="display:block" rendered="#{'dataTable'.equals(tabDefinition.type)}">
<ui:include src="dataTable.xhtml">
<ui:param name="dataTableName" value="#{tabDefinition.contentName}"/>
</ui:include>
</p:outputPanel>
<p:outputPanel style="display:block" rendered="#{'form'.equals(tabDefinition.type)}">
<ui:include src="form.xhtml">
<ui:param name="formId" value="#{tabDefinition.id}"/>
<ui:param name="formName" value="#{tabDefinition.contentName}"/>
</ui:include>
</p:outputPanel>
</p:tab>
</p:tabView>
I have simple flow of 3 tabs. I have tested the Simple tabview example on showcase.
But When I change the first tab with my content, I can't switch to other tabs.
Kindly guide me with what is wrong that needs to be changed.
Earlier I was using Wizard but I had the same tab change problem there as clicking on next was taking me to the last tab everytime.
and Now facing other issue with Tabview
I am posting the code:
<h:form id="compositionmaster">
<p:tabView id="tabView">
<p:tab id="tab1" title="Committee Details">
<h:panelGrid columns="2" columnClasses="label, value">
<h:outputText value="Committee Type: " />
<p:selectOneMenu id="type" value="#{userWizard.comm.committeeType}" effect="fade">
<f:selectItem itemLabel="----Select----" itemValue="0" />
<f:selectItem itemLabel="New" itemValue="1" />
<f:selectItem itemLabel="Existing" itemValue="2" />
</p:selectOneMenu>
<h:outputText value="Concerned Division: " />
<p:selectOneMenu id="division" value="#{userWizard.comm.committeeSubType}" effect="fade">
<f:selectItem itemLabel="----Select----" itemValue="0" />
<f:selectItem itemLabel="Administration" itemValue="1"/>
<f:selectItem itemLabel="Finance" itemValue="2" />
<f:selectItem itemLabel="Marketing" itemValue="3" />
<f:selectItem itemLabel="Others" itemValue="4" />
</p:selectOneMenu>
<h:outputText value="Committee Name: " />
<p:inputText value="#{userWizard.comm.committeeName}" maxlength="100"/>
<h:outputText value="Subject: " />
<p:inputText value="#{userWizard.comm.committeeSubject}" maxlength="100" />
<h:outputText value="Description: " />
<p:inputText value="#{userWizard.comm.committeeDescription}" maxlength="500" />
<h:outputText value="Tenure of Committee: " />
<p:panelGrid columns="2" >
<p:inplace id="Tenure" label="From">
<p:calendar value="#{userWizard.comm.startDate}" id="start" showOn="button" />
</p:inplace>
<p:inplace label="To">
<p:calendar value="#{userWizard.comm.endDate}" id="end" showOn="button" />
</p:inplace>
</p:panelGrid>
<h:outputText value="Add Document: " />
<h:form enctype="multipart/form-data">
<p:fileUpload fileUploadListener="#{fileBean.handleFileUpload}" mode="advanced" update="messages" multiple="true" sizeLimit="100000" allowTypes="/(\.|\/)(gif|jpe?g|png|doc|pdf)$/"/>
</h:form>
</h:panelGrid>
</p:tab>
<p:tab id="tab2" title="Godfather Part II">
<h:panelGrid columns="2" cellpadding="10">
<h:outputText id="tab2Text" value="stature grows."/>
</h:panelGrid>
</p:tab>
<p:tab id="tab3" title="Godfather Part III">
<h:panelGrid columns="2" cellpadding="10">
<h:outputText id="tab3Text" value="After a promise that his family would one day be completely legitimate."/>
</h:panelGrid>
</p:tab>
</p:tabView>
</h:form>
Don't use nested forms
HTML doesn't allow nested forms, so you shouldn't use them in primefaces either.They can cause undesired behavior.
See: other stackoverflow questions, or a nice collection of things to avoid in JSF: here (note point 2)
This is the only problem I see in your code. Other than that in rare cases you might have problems if using ajax and not processing the whole form. But as I can see this is not the case in your code.
I'm trying to get that code working:
<?xml version="1.0" encoding="UTF-8"?>
<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:p="http://primefaces.org/ui"
template="/templates/default.xhtml">
<ui:define name="content">
<h:form id="form">
<p:dataTable id="clienti" var="c" value="#{clientiController.clienti}" rowKey="#{c.id}">
<p:column headerText="Ragione sociale">
<h:outputText value="#{c.ragioneSociale}" />
</p:column>
<p:column headerText="Codice fiscale">
<h:outputText value="#{c.codiceFiscale}" />
</p:column>
<p:column style="width:4%">
<p:commandButton
update=":formDialog:clienteEditDialogTable"
oncomplete="clienteEditDialog.show()"
value="Modifica"
title="Modifica">
<f:setPropertyActionListener value="#{c}" target="#{clientiController.clienteSelezionato}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:commandButton value="Aggiorna" actionListener="#{clientiController.aggiorna}" update=":form:clienti" icon="ui-icon-arrowrefresh-1-n" />
<p:commandButton value="Nuovo Cliente" actionListener="#{clientiController.nuovo}" update=":formDialog:clienteEditDialogTable" oncomplete="clienteEditDialog.show()" />
</h:form>
<p:dialog
header="Modifica Cliente"
widgetVar="clienteEditDialog"
id="clienteEditDialog"
showEffect="fade"
hideEffect="explode"
closable="true"
modal="true"
appendToBody="true">
<h:form id="formDialog">
<h:panelGrid id="clienteEditDialogTable" columns="2" cellpadding="10" style="margin:0 auto;">
<p:outputLabel for="fieldNome" value="Ragione Sociale:" />
<p:inputText id="fieldNome" value="#{clientiController.clienteSelezionato.ragioneSociale}" />
<p:outputLabel for="fieldCodice" value="Codice:" />
<p:inputText id="fieldCodice" value="#{clientiController.clienteSelezionato.codiceFiscale}" required="true" requiredMessage="Codice fiscale obbligatorio" />
</h:panelGrid>
<p:commandButton
value="Conferma modifiche"
actionListener="#{clientiController.modifica}"
update=":form:clienti"
oncomplete="clienteEditDialog.hide()"
rendered="#{clientiController.clienteSelezionato.id!=null}" />
<p:commandButton
value="Conferma nuovo cliente"
actionListener="#{clientiController.crea}"
update=":form:clienti"
oncomplete="clienteEditDialog.hide()"
rendered="#{clientiController.clienteSelezionato.id==null}" />
</h:form>
</p:dialog>
</ui:define>
</ui:composition>
By clicking on "Nuovo Cliente" I get a javascript console error:
TypeError: 'undefined' is not a function (evaluating
'clienteEditDialog.show()')
It's a naming container misunderstanding of course.
Can you help me give the right ids?
In older primefaces version one could not assign the same name for widgetVar and id of a p:dialog
Try changing id="clienteEditDialog" into id="clienteEditDialogId"
You are referencing clienteEditDialogTable from different naming container. Actual id is
:formDialog:clienteEditDialogTable, so try with it. Id can be different but I can tell you more after you give the template source code.