I am creating a form using facelets. One input field looks like this:
<p:inputText id="initials" value="#{dilution.initials}" />
dilution is a entity bean and the initials field has two validation constraints set on it. One size constraint and one regex pattern constraint. My problem is getting error messages for both constraints to display next to the input field. Using the <h:message> only display one of the messages and using <h:messages> displays all input fields error messages or nothing (when I tried setting <h:messages for="initials" autoUpdate="true" />).
Is there any simple way to do this?
The full form:
<h:form id="addDilForm">
<p:panel>
<p:messages autoUpdate="true" showDetail="TRUE" />
<p:panelGrid>
<f:facet name="header" >
<p:row><p:column colspan="3">Ny spädningsfaktor</p:column></p:row>
</f:facet>
<p:row>
<p:column colspan="1">
<p:outputLabel for="sampT">Provtyp</p:outputLabel>
</p:column>
<p:column>
<p:selectOneMenu id="sampT" required="true" value="#{dilution.dilution.sampleType.ID}" >
<f:selectItem itemLabel="-" itemValue="" />
<f:selectItems value="#{SampleTypeController.samples}" var="samp" itemLabel="#{samp.name}" itemValue="#{samp.ID}" />
</p:selectOneMenu>
</p:column>
<p:column>
<p:message for="sampT" />
</p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel for="initials">Initialer</p:outputLabel>
</p:column>
<p:column >
<p:inputText id="initials" value="#{dilution.initials}" />
</p:column>
<p:column>
<p:message for="initials" />
</p:column>
</p:row>
<f:facet name="footer">
<p:row>
<p:column colspan="3">
<p:commandButton value="Save" action="#{dilution.save()}" update="addDilForm" icon="ui-icon-check" />
</p:column>
</p:row>
</f:facet>
</p:panelGrid>
</p:panel>
</h:form>
Using the <h:message> only display one of the messages
Just use <h:messages> with the plural "s" instead of <h:message> while keeping the for attribute.
<h:messages for="initials" />
The <p:messages> works the same way, only with a different UI.
Related
I basically have two input field I display if the value is currently empty or null. if it is not, I display an outputText. Those two values are currency values stored in a Long object and I use a converter to display the data properly (I can't use PrimeFaces' inputNumber since I am using PrimeFaces 5.3). My problem is the following :
<c:set var="edtVal1" value="#{bean.val1 ne null and bean.val1 ne 0}" scope="request" />
<c:set var="edtVal2" value="#{bean.val2 ne null and bean.val2 ne 0}" scope="request" />
<p:panelGrid>
<p:row>
<p:column colspan="2">
<p:messages id="mainMessages" globalOnly="false" autoUpdate="true" showDetail="true" />
</p:column>
</p:row>
<!-- [...] -->
<p:row>
<p:column styleClass="col-quarter col-label2">
<h:outputText value="value 1" />
</p:column>
<p:column styleClass="col-quarter col-value2" rendered="#{edtVal1}">
<h:outputText id="val1Output" value="#{bean.val1}" converter="myConverter" />
</p:column>
<p:column styleClass="col-quarter" rendered="#{not edtVal1}">
<p:inputText id="val1Input" value="#{bean.val1}" converter="myConverter">
<p:ajax update="mainMessages val1Input" event="change" />
</p:inputText>
</p:column>
</p:row>
<p:row>
<p:column styleClass="col-quarter col-label2">
<h:outputText value="value 2" />
</p:column>
<p:column styleClass="col-quarter col-value2" rendered="#{edtVal2}">
<h:outputText id="val1Output" value="#{bean.val2}" converter="myConverter" />
</p:column>
<p:column styleClass="col-quarter" rendered="#{not edtVal2}">
<p:inputText id="val1Input" value="#{bean.val2}" converter="myConverter">
<p:ajax update="mainMessages val1Input" event="change" />
</p:inputText>
</p:column>
</p:row>
</p:panelGrid>
when I put it like this, the messages thrown by the converter are displayed, but none of the fields are updated. However, if I use the same boolean variable for both input/output options (changed the variable used in rendered attribute of the 1rst data row to use edtVal2 in both) like so :
<p:row>
<p:column styleClass="col-quarter col-label2">
<h:outputText value="value 1" />
</p:column>
<p:column styleClass="col-quarter col-value2" rendered="#{edtVal1}">
<h:outputText id="val1Output" value="#{bean.val1}" converter="myConverter" />
</p:column>
<p:column styleClass="col-quarter" rendered="#{not edtVal1}">
<p:inputText id="val1Input" value="#{bean.val1}" converter="myConverter">
<p:ajax update="mainMessages val1Input" event="change" />
</p:inputText>
</p:column>
</p:row>
The first field updates successfully and the second once still does not work.
Using a converter to display a formated data is a workaround I already done and it works just as expected and I use the same converter than before. But this time, I don't understand why it's not working.
The converter is important to reproduce the issue, but any custom converter seems to do the job.
Any other solutions are still welcome on this post, but I managed to find a working solution :
when I changed the rendered attribute to a constant string, the issue was absent. So I think the problem comes from a misunderstanding of <c:set>.
My solution was to use a the bean as a controller. I changed the variables from the xhtml file to properties in the controller and now everything works fine. So I removed all <c:set> from my xhtml and use a proper MVC pattern on that page now.
Note :
For those who don't know what MVC is : it's a neat architectural pattern that divides clearly the user interface and manipulated data. Learn more on wikipedia.
I got a <p:treeTable> that works perfectly as showcase, I open a dialog to see the detail of each node... the dialog have a <h:selectOneMenu> and it's not working. I don't know why, send me the error "Target Unreachable" but if I put the attribute into a <h:outputText> it's working (it means that it's not null). What is happening?
<p:row>
<p:column colspan="4" style="width:800px">
<p:dialog id="edit" widgetVar="edit" header="Edit" showEffect="clip"
hideEffect="explode" position="center,center" width="520" modal="true" closable="false"
closeOnEscape="true" resizable="false" dynamic="true">
<h:panelGrid width="100%">
<p:row>
<p:column >
Name
</p:column>
<p:column>
<p:inputText value="#{levelBean.selectedLevel.name}" />
</p:column>
</p:row>
<p:row>
<p:column >
Description
</p:column>
<p:column>
<p:inputText value="#{levelBean.selectedLevel.description}" />
</p:column>
</p:row>
<p:row>
<p:column >
Level
</p:column>
<p:column>
<!-- this its showing OK !! -->
<h:outputText value="#{levelBean.selectedLevel.id.idLevel}"/>
<!-- this mark target unreachable -->
<h:selectOneMenu id="cbo" style="width=200px"
value="#{levelBean.selectedLevel.id.idLevel}" >
<f:selectItems value="#{cboLevelBean.list}" var="levelEdit"
itemValue="#{levelEdit.id.idNivel}"
itemLabel="#{levelEdit.name}"
/>
</h:selectOneMenu>
</p:column>
</p:row>
</h:panelGrid>
</p:dialog>
<p:treeTable id="treeTableLevels" value="#{levelBean.root}" var="subLevel" style="width:800px">
<f:facet name="header">
Levels
</f:facet>
<p:column headerText="#{subLevel.object.levelName}">
<h:outputText value="#{subNivel.object.nameSubLevel}" />
</p:column>
<p:column style="width:24px">
<p:commandLink update=":levelsForm:edit" oncomplete="PF('edit').show()" title="Level Detail" styleClass="ui-icon ui-icon-search">
<f:setPropertyActionListener value="#{subLevel}" target="#{levelBean.selectedLevel}" />
</p:commandLink>
</p:column>
</p:treeTable>
</p:column>
</p:row>
Thanks for any help!!
I fond the reason... I just put the selectonemenu into another form and it works.. but I don't know why.. can somebody explain?
<h:form id="someform">
<p:selectOneMenu id="cbo" style="width: 200px"
value="#{levelBean.selectedLevel.id.idLevel}">
<f:selectItems value="#{cboLevelBean.list}" var="levelEdit"
itemValue="#{levelEdit.id.idNivel}"
itemLabel="#{levelEdit.name}"/>
</p:selectOneMenu>
</h:form>
Anyway hope this help to others!
I need explanation for the below value binding in the outputText inside p:dialog .I dont clear with that and is there any other way.
In my sample :
I have tried ,if i select the single or many check box the value get binded but when I click root check box which used for selecting all the check boxes, its getting selected but the values not get stored in the back end.
<p:dataTable id="checkboxDT"
var="car"
value="#{dtSelectionView.cars6}"
selection="#{dtSelectionView.selectedCars}"
rowKey="#{car.id}"
style="margin-bottom:0">
<f:facet name="header">
Checkbox
</f:facet>
<p:column selectionMode="multiple"
style="width:16px;text-align:center"/>
<p:column headerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color">
<h:outputText value="#{car.color}" />
</p:column>
<f:facet name="footer">
<p:commandButton process="checkboxDT"
update=":form:multiCarDetail"
icon="ui-icon-search"
value="View"
oncomplete="PF('multiCarDialog').show()" />
</f:facet>
</p:dataTable>
<p:dialog header="Selected Cars"
widgetVar="multiCarDialog"
modal="true"
showEffect="fade"
hideEffect="fade"
resizable="false"
width="200">
<p:outputPanel id="multiCarDetail" style="text-align:center;">
<ui:repeat value="#{dtSelectionView.selectedCars}"
var="car">
<h:outputText value="#{car.id} - #{car.brand}"
style="display:block"/>
</ui:repeat>
</p:outputPanel>
</p:dialog>
You should update checkboxDT because update is used to determines id’s of components to be updated (refreshed with updated values from server). If you do not update checkboxDT, the selectedCars do not update too.
<p:commandButton process="checkboxDT"
update="checkboxDT,:form:multiCarDetail"
icon="ui-icon-search"
value="View"
oncomplete="PF('multiCarDialog').show()" />
How to use separator tag in primefaces effectively?
For the following output, separator is displayed as one of the element in next row. Ideally I would like separator in a single row and then display other input elements. I have attached screen shot of how separator is displayed, as it is displayed 5th element in second row.
Any help is highly appreciable.
JSF code
<p:panelGrid columns="4" id="mypanel">
<f:facet name="header">
Projects
</f:facet>
<p:outputLabel value="Project: ">
<p:inputText required="true"
readonly="true">
</p:inputText>
</p:outputLabel>
<p:outputLabel value="Project Title: " >
<p:inputText readonly="true">
</p:inputText>
</p:outputLabel>
<p:outputLabel value="Is selected " >
<p:selectBooleanCheckbox value="" />
</p:outputLabel>
<p:outputLabel value="Is approved" >
<p:selectBooleanCheckbox value="" />
</p:outputLabel>
<p:separator>
</p:separator>
... other elements
First, consider the usage of the for attribute of the <p:outputLabel> component. You're not supposed to nest <p:inputText> inside <p:outputLabel>.
Next, you can use <p:row> and <p:column> in order to describe a more complex structure of the content of a <p:panelGrid>.
Try out this:
<p:panelGrid id="mypanel">
<f:facet name="header">Projects</f:facet>
<p:row>
<p:column>
<p:outputLabel value="Project:" for="project">
<p:inputText required="true" readonly="true" id="project"/>
</p:column>
<p:column>
<p:outputLabel value="Project Title:" for="title" />
<p:inputText readonly="true" id="title"/>
</p:column>
<p:column>
<p:outputLabel value="Is selected:" for="isSel"/>
<p:selectBooleanCheckbox value="" id="isSel"/>
</p:column>
<p:column>
<p:outputLabel value="Is approved:" for="isApp"/>
<p:selectBooleanCheckbox value="" id="isApp"/>
</p:column>
</p:row>
<p:row>
<p:column colspan="4">
<p:separator />
</p:column>
</p:row>
<p:row>
<!-- Other elements. -->
</p:row>
</p:panelGrid>
You can see the Live demo, as well.
I have a parent form as and this form contain 5 more form on my five tabs. The problem is when i submit my parent form the data on parent form is submitting but all child form is not going on server. As i think by submitting parent form all child form are ignored. if i am right then please suggest a solution for this problem. i be very thankfull to all of you guys.I am using jsf2.0 primefaces 3.4
I have some problems in my page after merging the parent and children forms into a single one. I cannot update the <h:textarea> on row selection event.suggest me where i am wrong on update event my code is below
<h:form id="mainForm">
<h:panelGrid>
<p:accordionPanel activeIndex="#{salesLetterProBean.activeIndex}">
<p:tab title="Product Introduction" id="productinfooTab">
<p:panel header="Please Fill In The Details" style="padding:5px;"
id="productInfoPanel">
<h:panelGrid cellpadding="1" cellspacing="0" columns="1"
columnClasses="a,b,c,d,e" rowClasses="plainRow,shadedRow">
<h:outputLabel value="Introductory HeadLine:" class="field-title"
id="proInfoPanelGrid"/>
<p:inputTextarea value="#{salesLetterProBean.productIntroductoryLineRow.description}"
id="proIntroductorySentence"
style="width:1060px;height:400px;" effectDuration="400" />
</h:panelGrid>
<p:dataTable var="productIntroSentenceList" first="1"
value="#{salesLetterProBean.productIntroductorySentenceList}"
paginator="true" rows="5" rowsPerPageTemplate="5,10,15,20,25"
rowIndexVar="rowIndex" rowKey="#{productIntroSentenceList.id}"
selection="#{salesLetterProBean.productIntroductoryLineRow}"
selectionMode="single" update="proIntroductorySentence">
<p:ajax event="rowSelect" listener="#{salesLetterProBean.onRowSelect}" />
<p:column headerText="#">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{rowIndex}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{rowIndex}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Description">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{productIntroSentenceList.description}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{productIntroSentenceList.description}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Select">
<p:commandLink process="#none">
<!-- -->
<span title="Select" class="ui-icon ui-icon-check"/>
</p:commandLink>
</p:column>
</p:dataTable>
<h:panelGrid cellpadding="1" cellspacing="0" columns="1"
columnClasses="a,b,c,d,e" rowClasses="plainRow,shadedRow">
<h:outputLabel value="Feature List:" class="field-title" />
<p:inputTextarea style="width:1060px;height:400px;"
effectDuration="400" id="featureList"
value="#{salesLetterProBean.featureList}"/>
<h:outputLabel value="How Your Product Solve The Problems :"
class="field-title" />
<p:inputTextarea style="width:1060px;height:400px;"
effectDuration="400" id="prbSolutions"
value="#{salesLetterProBean.problemSolutions}" />
</h:panelGrid>
<h:commandButton value="Previous"
actionListener="#{applicantManagedBean.changeActiveIndex}"
immediate="true" class="defaultButton" />
<h:commandButton value=" Next "
actionListener="#{applicantManagedBean.changeActiveIndex}"
immediate="true" class="defaultButton" />
</p:panel>
</p:tab>
</p:accordionPanel>
</h:panelGrid>
</h:form>
Regards.
nested forms are not allowed, but you can have a multiple forms as stack.