After Primefaces Validation not able to input anything in Form? - jsf

This is my form ..
<p:panel id="panel" header="Portfolio Transaction">
<p:messages id="msgs" />
<p:panelGrid columns="7" id="transactionPanel" style="display: inline-block;">
<f:facet name="header">
Register New Trade
</f:facet>
<h:outputLabel for="tipsSuggestionBoxId" value="Company Name:*"></h:outputLabel>
<h:outputText value="Date:*" />
<h:outputText value="Type:*" />
<h:outputText value="Quantity:*" />
<h:outputText value="Price:*" />
<h:outputText value="Brokerage:" />
<h:outputText value="Notes:" />
<p:autoComplete id="tipsSuggestionBoxId"
completeMethod="#{portfolioTransactionBean.autoSelectCompany}"
value="#{portfolioTransactionBean.txnCurrentRecord.companyName}"
minChars="3" nothingLabel="No similar company found"
requestDelay="1" minQueryLength="3" required="true"
requiredMessage="Company Name Cannot be empty">
</p:autoComplete>
<p:calendar id="from_date" size="10" required="true"
requiredMessage="Date Cannot be empty"
value="#{portfolioTransactionBean.txnCurrentRecord.umptTransDate}"
mode="popup" showOn="both" pattern="dd/MM/yyyy"
popupIconOnly="true" readonly="#{facesContext.renderResponse}">
</p:calendar>
<p:selectOneMenu id="tranType"
value="#{portfolioTransactionBean.txnCurrentRecord.umptTransType}">
<f:selectItem itemLabel="Transaction Type" itemValue="" />
<f:selectItem itemLabel="Buy" itemValue="Buy" />
<f:selectItem itemLabel="Sell" itemValue="Sell" />
</p:selectOneMenu>
<p:spinner id="transQuntity" required="true"
value="#{portfolioTransactionBean.txnCurrentRecord.umptQty}" min="1" label="Quanity" size="5"
validatorMessage="Field Is mandatory" />
<p:spinner id="transPrice" required="true" size="5"
value="#{portfolioTransactionBean.txnCurrentRecord.umptPrice}"
label="Price"
validatorMessage="Field Is mandatory" />
<p:spinner id="brokerage" size="5"
value="#{portfolioTransactionBean.txnCurrentRecord.umptBrokerage}" />
<h:inputText
value="#{portfolioTransactionBean.txnCurrentRecord.umptNotes}" />
<f:facet name="footer">
<p:commandButton value="Save Transaction " icon="ui-icon-check"
action="#{portfolioTransactionBean.savePortfolioTransaction}"
update="panel" style="float:right;right:20%;">
<p:resetInput target="transactionPanel" />
</p:commandButton>
<p:spacer width="100" height="10" />
<p:commandButton value="Clear" update="transactionPanel"
process="#this">
<p:resetInput target="transactionPanel" />
</p:commandButton>
</f:facet>
</p:panelGrid>
after form validation fail like user not input date or company name , i am able to see proper message but after that i am not able to input any value from keybord.Any one know what is the issue with code.
This problem not occurring only when validation fail even when i clicked on clear button i am getting same issue. Any one get this issue?

Yes, it is true for some components in primefaces. The only solution is trying using some other components which replaces the problamatic components. or other wise if there is some error show the error , and write a code which refreshes entire screen if user gets an error message. Ofcourse the user needs to enter all details again.

Related

<p:dataScroller> reloading automatically on entity edits

I have a p:datascroller configured to display a list of entities and lazy loading them upon clicking the more button.
<h:form id="investigationOperationsForm">
<p:dataScroller
value="#{investigationManagerBackingBean.lazyLoadedInvestigationOperations}"
var="investigationOperation" chunkSize="9" lazy="true"
rowIndexVar="test">
<f:facet name="header">
Scroll down to load investigations
</f:facet>
<h:panelGrid columns="2" style="width:100%"
columnClasses="logo,detail">
<p:commandLink oncomplete="PF('investigationDialogW').show()"
update="investigationEditorForm" immediate="true">
<f:setPropertyActionListener value="#{investigationOperation}"
target="#{investigationManagerBackingBean.selection}" />
<p:graphicImage alt="Investigation Operation"
url="/images/common/investigation-operation.png" />
</p:commandLink>
<!-- h:outputText value="#{investigationOperation.name}" /-->
<p:outputPanel id="pnl">
<h:panelGrid columns="2" cellpadding="5">
<h:outputText value="Name:" />
<h:outputText value="#{investigationOperation.name}"
style="font-weight: bold" />
<h:outputText value="Description:" />
<h:outputText value="#{investigationOperation.shortDescription}"
style="font-weight: bold" />
</h:panelGrid>
<p:draggable for="pnl" />
</p:outputPanel>
</h:panelGrid>
<f:facet name="loader">
<p:outputPanel
visible="#{investigationManagerBackingBean.lazyLoadedInvestigationOperations.rowCount gt 10}"
rendered="#{investigationManagerBackingBean.lazyLoadedInvestigationOperations.rowCount gt 10}">
<p:commandLink value="More" />
</p:outputPanel>
</f:facet>
</p:dataScroller>
</h:form>
In addition, I have a dialog that pops up when the p:commandLink oncomplete method is executed where I can update the value of the current selection and persist the changes.
<p:dialog id="investigationDialog"
header="#{msg['inv-manager.invDialog.header.title']}"
widgetVar="investigationDialogW" minWidth="400" minHeight="400"
resizable="false" position="center center" modal="true">
<p:panel id="investigationEditorPanel">
<h:form id="investigationEditorForm">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="name"
value="#{msg['inv-manager.invDialog.nameFieldLabel']}" />
<p:inplace id="nameInplaceEditor" editor="true">
<p:inputText
value="#{investigationManagerBackingBean.selection.name}"
id="name" required="true" immediate="true"
label="#{msg['inv-manager.invDialog.nameFieldInputLabel']}" />
</p:inplace>
<h:outputLabel for="shortDescription"
value="#{msg['inv-manager.invDialog.shortDescriptionFieldLabel']}" />
<p:inplace id="shortDescriptionInplaceEditor" editor="true">
<p:inputText
value="#{investigationManagerBackingBean.selection.shortDescription}"
id="shortDescription" required="true" immediate="true"
label="#{msg['inv-manager.invDialog.shortDescriptionFieldInputLabel']}" />
</p:inplace>
<h:outputLabel for="description"
value="#{msg['inv-manager.invDialog.descriptionFieldLabel']}" />
<p:inputTextarea id="description" required="false"
label="#{msg['inv-manager.invDialog.descriptionFieldInputLabel']}"
immediate="true"
value="#{investigationManagerBackingBean.selection.description}" />
<p:commandButton id="okButton"
value="#{msg['inv-manager.invDialog.okButton']}" type="submit"
partialSubmit="true" process="investigationEditorForm"
action="#{investigationManagerBackingBean.createOrUpdate()}"
onclick="dlg.hide();" />
</h:panelGrid>
</h:form>
</p:panel>
</p:dialog>
The backing bean is configured to be #ViewScoped and everything works as defined. However, upon update the values of the p:datascroller are reset and the load method of the lazy loading model is executed and the datascroller is repopulated with new values from the database.
I have no reference to the datascroller or its containing form in the p:dialog and am wondering why the datascroller is being updated automagically? What am I missing in the equation. Have I overlooked something or something specific to the p:datascroller model that I need to consider when following this approach?
Look forward to the expertise of the community in resolving this issue.
Many thanks in advance :)

using ID from a selected item in jsf

I want to use the ID of selected item from the list below to use it in other function, how can I do it please , am using JSF;
I have tried many times but in vain !! please help
here is my code in jsf:
<p:panelGrid columns="2" style="width:60% ; padding-left:25%"
layout="grid">
<p:dataTable var="convert"
value="#{convertirDeviseCtr.listeDevise}" style="width:70%"
id="convertir">
<f:facet name="header">Liste des devises</f:facet>
<p:column selectionMode="single">
<h:outputText value=" " />
<h:outputText value=" " />
<p:graphicImage value="/images/flags/#{convert.libSiglDev}.png"
id="img" style="width:20px ; height:20px" />
<h:outputText value=" " />
<h:outputText value=" " />
<h:outputText value="#{convert.libDevDev}" />
</p:column>
</p:dataTable>
<p:panel style="padding-top:40%">
<br />
<h:outputText value="Saisir montant :" />
<h:outputText value=" " />
<p:keyboard id="image" value="#{keyboardView.value8}"
showMode="button" buttonImageOnly="true"
buttonImage="/images/icons/keyboardpencil.png" keypadOnly="true"
style="width:150px ; height:20px" />
<br />
<br />
<p:selectOneButton value="" style="margin-left:35%">
<f:selectItem itemLabel="Achat" itemValue="A" />
<f:selectItem itemLabel="Vente" itemValue="V" />
</p:selectOneButton>
<br />
<br />
<p:commandButton value="Convertir" icon="ui-icon-refresh"
style="margin-left:40%"></p:commandButton>
<br />
<br />
<p:outputLabel>Resultat :</p:outputLabel>
<p:inputText value=""></p:inputText>
</p:panel>
</p:panelGrid>
thanks in advance;
You must use the selection attribute of <p:dataTable>. The value of the selection attribute must be a property of a backing bean where the selected value will be stored. For example:
...
<p:dataTable var="convert"
value="#{convertirDeviseCtr.listeDevise}" style="width:70%"
id="convertir" selection="#{someController.selectionProperty}">
...
More information about <p:dataTable> tag and the different types of selection modes:
http://www.primefaces.org/showcase/ui/data/datatable/selection.xhtml

How disable sourceCaption from primefaces picklist

Does anyone knows how to disable the sourceCaption from primefaces picklist template?
I need that my user set three informations
(crudMB.upf.dataImplantacao, crudMB.upf.responsavelImplantacao, crudMB.upf.prazoSenha ) before selecting any options at the picklist.
At my code you guys can see this three variables that i need to enable the source part of the picklist.
<p:panel header="Produtos Fornecidos" style="height: auto;">
<h:panelGrid columns="2">
<h:outputLabel value="Data Implantação:" />
<p:calendar value="#{crudMB.upf.dataImplantacao}" />
<h:outputLabel value="Responsavel Implantação: " />
<p:inputText value="#{crudMB.upf.responsavelImplantacao}" />
<h:outputLabel value="Prazo de Senha: " />
<p:selectOneMenu value="#{crudMB.upf.prazoSenha}" >
<f:selectItem itemLabel="Selecione Um" itemValue="" itemDisabled="true" />
<f:selectItems value="#{crudMB.prazosSenha}" var="ps" itemLabel="#{ps.descricao}" />
</p:selectOneMenu>
</h:panelGrid>
<h:panelGrid>
<p:pickList id="picklist" value="#{crudMB.produtosFornecidos}" var="pf" itemValue="#{pf}" itemLabel="#{pf.nome}" converter="genericPickListConverter" >
<f:facet name="sourceCaption" >Disponiveis</f:facet>
<f:facet name="targetCaption" >Escolhidos</f:facet>
<p:ajax event="transfer" listener="#{crudMB.onTransfer}" />
<p:column>
<p:outputLabel value="#{pf.nome}"/>
</p:column>
<p:column>
<p:outputLabel value="#{pf.plataforma}"/>
</p:column>
<p:column>
<p:outputLabel value="#{pf.versaoAtual}"/>
</p:column>
</p:pickList>
</h:panelGrid>

Popuppanel stays open after validation

I have a rich faces popuppanel that I want to keep open until all validation is done. For now I just have a required attribute on the address. If the address is missing and the Submit button is clicked the popuppanel should stay open until the address is entered which it does. However when the user enters an address the form sends the email as it should but the page stays open. I need the popuppanel to close when the required field is entered.
<rich:popupPanel id="addressModalPanel" header="Change Billing Address" modal="true" domElementAttachment="form" width="450" height="400">
<h2>Submit Change of Billing Address</h2>
<h:outputLabel value="Enter changes to your company's billing address in the fields below and then click Submit" /><br></br>
<h:panelGrid columns="2" >
<h:outputLabel value="Company Name: "/>
<h:inputText value="#{supplieraddress.supplierAddress.supplierName}" disabled="true" />
<h:outputLabel value="Vendor Number: " />
<h:inputText value="#{supplieraddress.supplierAddress.id}" disabled="true"/>
<h:outputLabel value="Address: " />
<h:inputText id="add1" value="#{supplieraddress.supplierAddress.add1}" required="true" requiredMessage="Address is required" style="width:200px" />
<h:outputLabel value=""/>
<h:inputText value="#{supplieraddress.supplierAddress.add2}" style="width:200px" />
<h:outputLabel value=""/>
<h:inputText value="#{supplieraddress.supplierAddress.add3}" style="width:200px" />
<h:outputLabel value="City: " />
<h:inputText id="city" value="#{supplieraddress.supplierAddress.city}" />
<h:outputLabel value="State: " />
<h:inputText id="state" value="#{supplieraddress.supplierAddress.state}" style="width:50px" />
<h:outputLabel value="Zip: " />
<h:inputText id="zip" value="#{supplieraddress.supplierAddress.zip}" style="width:50px" />
<h:outputLabel value="Country (If not US): " />
<h:inputText id="country" value="#{supplieraddress.supplierAddress.country}" style="width:50px" />
<a4j:commandButton id="submit" value="Submit" actionListener="#{supplieraddress.billingAddressEmail()}" oncomplete="if(#{!empty add1}) #{rich:component('addressModalPanel')}.hide()" >
</a4j:commandButton>
<h:commandButton value="Close" >
<rich:componentControl event="click" target="addressModalPanel" operation="hide" />
</h:commandButton>
<a4j:outputPanel ajaxRendered="true">
<rich:message for="add1" style="color:red"/>
</a4j:outputPanel>
</h:panelGrid>
</rich:popupPanel>
if(#{!empty add1}) looks like a misuse of the empty operator; empty is to be applied to Collections only. What you should be using instead
<a4j:commandButton id="submit" value="Submit" actionListener="#{supplieraddress.billingAddressEmail()}" oncomplete="if(!#{facesContext.validationFailed}) #{rich:component('addressModalPanel')}.hide()" >
Where facesContext.validationFailed is a convenience method that checks the validation status of the current JSF context

JSF2 - selectOneMenu opens outside overlayPanel

I'm working with a <p:overlayPanel> that includes a couple of <p:selectOneMenu>s, as well as several other components. When the <p:selectOneMenu>s are opened, some of the fields fall outside of the <p:overlayPanel>, and clicking on them causes the panel to close. (See image below).
.
.
.
One solution would be to modify the <p:overlayPanel> as follows:
dismissable="false"
showCloseIcon="true"
Another would be to modify the <p:selectOneMenu>:
height="50"
I'm looking for some options for solutions that are as simple as possible and preferably don't involve a change to the UI (the above solutions both change the UI). Is there a way to keep the <p:overlayPanel> open when a click outside of it falls within one of its <p:selectMenu>s?
More Complete Code
<p:overlayPanel styleClass="col-settings-panel"
id="colSettingsPanel"
for="columnSettingsBtn"
hideEffect="fade"
widgetVar="wvcolSettingsPanel"
rendered="#{empty rendered ? 'true' : rendered}" >
<p:pickList id="pickList"
value="#{fileSearchPersonalizationBean.columns}"
var="column"
showSourceFilter="true"
itemLabel="#{column}"
itemValue="#{column}"
itemDisabled="#{column eq 'Ref No'}">
<p:ajax event="transfer" listener="#{fileSearchPersonalizationBean.onTransfer}" update="pickList availableCount selectedCount selectSortBy" />
<f:facet name="sourceCaption">
<h:outputText value="Available Columns ("/>
<h:outputText id="availableCount" value="#{fileSearchPersonalizationBean.sourceCount}"/>
<h:outputText value=")"/>
</f:facet>
<f:facet name="targetCaption">
<h:outputText value="Selected Columns ("/>
<h:outputText id="selectedCount" value="#{fileSearchPersonalizationBean.targetCount}"/>
<h:outputText value=")"/>
</f:facet>
</p:pickList>
<p:panelGrid columns="1">
<p:outputPanel styleClass="col-settings-panel-option">
<h:outputLabel value="Sort By: " />
<p:selectOneMenu id="selectSortBy"
value="#{fileSearchPersonalizationBean.sortBy}" >
<p:ajax listener="#{fileSearchPersonalizationBean.sortByChanged}" />
<f:selectItems id="sortByList" value="#{fileSearchPersonalizationBean.columns.target}" />
</p:selectOneMenu>
</p:outputPanel>
<p:outputPanel styleClass="col-settings-panel-option">
<h:outputLabel value="Items per Page:"/>
<p:selectOneMenu id="selectRows" value="#{fileSearchPersonalizationBean.sRows}" >
<f:selectItem itemLabel="10" itemValue="10" />
<f:selectItem itemLabel="25" itemValue="25" />
<f:selectItem itemLabel="50" itemValue="50" />
<f:selectItem itemLabel="100" itemValue="100" />
</p:selectOneMenu>
</p:outputPanel>
</p:panelGrid>
<p:panelGrid styleClass="toolbar" columns="2">
<p:outputPanel>
<p:commandButton styleClass="btn-secondary"
id="loadDefaults"
value="Reset Defaults"
update="selectSortBy pickList selectRows"
actionListener="#{fileSearchPersonalizationBean.loadDefaultVO}" />
</p:outputPanel>
<p:outputPanel styleClass="toolbar-right">
<p:commandButton styleClass="btn-secondary"
id="columnClose"
value="Cancel"
actionListener="#{fileSearchPersonalizationBean.panelCancel}"
immediate="false">
<f:attribute name="panelId" value="#{formId}:colSettingsPanel" />
</p:commandButton>
<p:commandButton styleClass="btn-primary"
id="columnSubmit"
value="Save & Apply"
actionListener="#{fileSearchPersonalizationBean.panelSave}"
oncomplete="refreshSearchResults();" >
<f:attribute name="panelId" value="#{formId}:colSettingsPanel" />
</p:commandButton>
</p:outputPanel>
</p:panelGrid>
</p:overlayPanel>`

Resources