I have a h:panelGroup in JSF page with input field for data selection:
<h:panelGroup>Date to change password</h:panelGroup>
<h:panelGroup>
<h:inputText value="#{AddAccountController.formMap['DATETOCHANGEPASSWD']}" autocomplete="off" >
<f:validateLength minimum="0" maximum="35"/>
</h:inputText>
</h:panelGroup>
The question is how I can integrate the calendar into the input menu. Something like this:
<h:panelGroup>Date to change password</h:panelGroup>
<h:panelGroup>
<h:inputText value="#{AddAccountController.formMap['DATETOCHANGEPASSWD']}" autocomplete="off" >
<p:calendar value="#{AddAccountController.date4}" pattern="MM/dd/yyyy HH:mm:ss" />
<f:validateLength minimum="0" maximum="35"/>
</h:inputText>
</h:panelGroup>
I tested the code but it's not working. What is the proper way to use it into input field?
think you have to add two different field in from because this way it will not work in this way.
<h:panelGroup>Date to change password</h:panelGroup>
<h:panelGroup>
<h:inputText value="#{AddAccountController.formMap['DATETOCHANGEPASSWD']}" autocomplete="off" >
<f:validateLength minimum="0" maximum="35"/>
</h:inputText>
<p:calendar value="#{AddAccountController.date4}" pattern="MM/dd/yyyy HH:mm:ss"/>
</h:panelGroup>
Related
At this moment my code works but I have to select a date twice if I want to get properly information. I tried to change the ajax event to dateSelect, but it adds an hash in my URL and do nothing. I just want to keep its current behaviour, but selecting a date one single time.
Thanks in advance.
<h:form>
<h:panelGrid columns="2">
<h:outputLabel for="medico" value="Médico:" />
<h:inputText id="medico" value="#{pacienteControlador.pacienteActual.medico.nombre} #{pacienteControlador.pacienteActual.medico.apellidos}" disabled="true"/>
<p:outputLabel for="fecha" value="Fecha:" />
<p:calendar id="fecha" value="#{pacienteControlador.calendarManagedBean.date}" pattern="dd/MM/yyyy">
<f:ajax event="blur" listener="#{pacienteControlador.citasDisponibles()}" render="hora" />
</p:calendar>
<p:outputLabel for="hora" value="Hora:" />
<h:selectOneMenu id="hora" value="#{pacienteControlador.horaCita}">
<f:selectItems value="#{pacienteControlador.listaHorasLibres}" />
</h:selectOneMenu>
</h:panelGrid>
<h:commandButton value="Crear" action="#{pacienteControlador.crearCita()}"/>
</h:form>
Solution:
Use p:ajax instead f:ajax
<p:ajax event="dateSelect" listener="{pacienteControlador.citasDisponibles()}" update="hora" />
i want to inplace edit a autoComplete text field:
<h:panelGroup>
<ui:repeat value="#{cc.attrs.relations}" var="ur">
<p:panel headerText="Relation">
<p:inplace editor="true" >
<!-- <p:inputText value="#{ur.relation.name}"
required="true" label="text"/>-->
<p:autoComplete
value="myval"
/>
</p:inplace>
</p:panel>
</ui:repeat>
</h:panelGroup>
However, this does not work (autocomplete is not shown.).
Do you know how to accomplish this?
The reason autocomplete is not shown is that inplace does not get its label as with i.e. inputText.
adding label="TheLabel" solves the problem.
<h:panelGroup>
<ui:repeat value="#{cc.attrs.relations}" var="ur">
<p:panel headerText="Relation">
<p:inplace editor="true" label="TheLabel">
<!-- <p:inputText value="#{ur.relation.name}"
required="true" label="text"/>-->
<p:autoComplete
value="myval"
/>
</p:inplace>
</p:panel>
</ui:repeat>
</h:panelGroup>
Currently I have a <h:inputText>
<h:outputLabel value="#{locale.nroEmployees}:"/>
<h:inputText value="#{companyEditBean.companyEmployeesAmount}"
disabled="#{not companyEditBean.editingAllowed}">
</h:inputText>
How can I achieve, that the user can only type digits in input fields?
You can filter it afterwards to only accept numbers, or do somehting similar to:
<h:inputText value="#{companyEditBean.companyEmployeesAmount}"
disabled="#{not companyEditBean.editingAllowed}"
onkeypress="if(event.which < 48 || event.which > 57) return false;"/>
As an alternative way, you can use primeface for achieving this:
<h:form>
<h:panelGrid columns="2">
<h:outputText value="Number Input"/>
<h:inputText id="txt_" />
</h:panelGrid>
<p:keyFilter for="txt_" mask="num" />
</h:form>
Or, with primeface extension you can do this (assuming you added required jar and defining extension namespace as pe)
<p:inputText id="txt_" required="false" label=""
value="#{beanclass.blablamethod}" maxlength="10">
<f:validateLength minimum="10" for="txt_" />
<pe:keyFilter regEx="/[\d\-]/"></pe:keyFilter>
</p:inputText>
I have a form where I have a rich:select whether they choose option A or option B an h:inputText is rendered.
Initially the h:inputText corresponding to option A is rendered and if I leave it blank the requiredMessage appears and everything is OK.
Now when I select the second option of the rich:select the h:inputText for option B is rendered but if I leave it blank the requiredMessage doesn't appear.
What am I missing?
My xhtml code is as follows:
<h:panelGrid columns="3">
<h:outputLabel for="tipoPersona">Tipo de persona</h:outputLabel>
<rich:select id="tipoPersona"
required="true" value="#{userInformationController.tipoPersona}"
requiredMessage="Seleccione el tipo de persona"
defaultLabel="Seleccione una opción">
<f:selectItems value="#{userInformationController.tipoPersonaOpciones}"/>
<f:ajax event="blur" render="tipoPersonaMessage"/>
<f:ajax event="selectitem"
render="outputLabelCURP inputTextCURP messageCURP outputLabelRFC inputTextRFC messageRFC"
listener="#{userInformationController.doRenderCURP}"/>
</rich:select>
<rich:message id="tipoPersonaMessage" ajaxRendered="true"
for="tipoPersona"/>
<a4j:outputPanel id="outputLabelCURP">
<h:outputLabel for="CURP" value="CURP"
rendered="#{userInformationController.curpRendered}"/>
</a4j:outputPanel>
<a4j:outputPanel id="inputTextCURP">
<h:inputText id="CURP" required="true"
requiredMessage="Introduzca el CURP"
rendered="#{userInformationController.curpRendered}">
<f:ajax event="blur" render="curpMessage"/>
</h:inputText>
</a4j:outputPanel>
<a4j:outputPanel id="messageCURP">
<rich:message id="curpMessage" ajaxRendered="true"
for="CURP"
rendered="#{userInformationController.curpRendered}"/>
</a4j:outputPanel>
<a4j:outputPanel id="outputLabelRFC">
<h:outputLabel for="RFC" value="RFC"
rendered="#{not userInformationController.curpRendered}"/>
</a4j:outputPanel>
<a4j:outputPanel id="inputTextRFC">
<h:inputText id="RFC" required="true"
requiredMessage="Introduzca el RFC"
rendered="#{not userInformationController.curpRendered}">
<f:ajax event="blur" render="rfcMessage"/>
</h:inputText>
</a4j:outputPanel>
<a4j:outputPanel id="messageRFC">
<rich:message id="rfcMessage" ajaxRendered="true"
for="RFC"
rendered="#{not userInformationController.curpRendered}"/>
</a4j:outputPanel>
</h:panelGrid>
UPDATE
I have made some changes on the UI and now I have this
<fieldset>
<legend>Datos SURI</legend>
<h:panelGrid columns="3">
<h:outputLabel for="tipoPersona">Tipo de persona</h:outputLabel>
<rich:select id="tipoPersona"
required="true" value="#{userInformationController.tipoPersona}"
requiredMessage="Seleccione el tipo de persona"
defaultLabel="Seleccione una opción">
<f:selectItems value="#{userInformationController.tipoPersonaOpciones}"/>
<f:ajax event="blur" render="tipoPersonaMessage"/>
<f:ajax event="selectitem"
render="outputLabelCURP inputTextCURP messageCURP
outputLabelRFC inputTextRFC messageRFC
datosPersonaFisica datosPersonaMoral"
listener="#{userInformationController.doRenderTipoPersona}"/>
</rich:select>
<rich:message id="tipoPersonaMessage" ajaxRendered="true"
for="tipoPersona"/>
<a4j:outputPanel id="outputLabelCURP">
<h:outputLabel for="CURP" value="CURP"
rendered="#{userInformationController.personaFisicaRendered}"/>
</a4j:outputPanel>
<a4j:outputPanel id="inputTextCURP">
<h:inputText id="CURP" required="true"
requiredMessage="Introduzca el CURP"
value="#{userInformationController.curp}"
rendered="#{userInformationController.personaFisicaRendered}">
<f:ajax event="blur" render="curpMessage identificadorSURI"
listener="#{userInformationController.doSearchIdSURI}"/>
</h:inputText>
</a4j:outputPanel>
<a4j:outputPanel id="messageCURP">
<rich:message id="curpMessage" ajaxRendered="true" for="CURP"
rendered="#{userInformationController.personaFisicaRendered}"/>
</a4j:outputPanel>
<a4j:outputPanel id="outputLabelRFC">
<h:outputLabel for="RFC" value="RFC"
rendered="#{userInformationController.personaMoralRendered}"/>
</a4j:outputPanel>
<a4j:outputPanel id="inputTextRFC">
<h:inputText id="RFC" required="true"
requiredMessage="Introduzca el RFC"
value="#{userInformationController.rfc}"
rendered="#{userInformationController.personaMoralRendered}">
<f:ajax event="blur" render="rfcMessage identificadorSURI"
listener="#{userInformationController.doSearchIdSURI}"/>
</h:inputText>
</a4j:outputPanel>
<a4j:outputPanel id="messageRFC">
<rich:message id="rfcMessage" ajaxRendered="true" for="RFC"
rendered="#{userInformationController.personaMoralRendered}"/>
</a4j:outputPanel>
<h:outputLabel for="identificadorSURI">Identificador SURI</h:outputLabel>
<h:inputText id="identificadorSURI" disabled="true"
value="#{userInformationController.identificadorSuri}"/>
</h:panelGrid>
</fieldset>
However, I found that putting my Bean in RequestScope isn't firing the listener on both of the h:inputText (id='CURP' and id='RFC'), whereas if I put the bean in ViewScope the listener is getting fired and processed correctly.
What I need is to actually have the Bean in RequestScope because I need to create a whole new form whether the user changes the value of the rich:select. If I keep the scope in ViewScope all the data is kept within the Bean and I will then have to erase the fields when the user changes the value of the select.
Can someone explain to me why is this happening? I could'n figure out what's the trick !
Cheers
A request scoped bean is recreated on every single request, also on every single ajax request. So when you change a property by ajax to a new value other than default (e.g. the one responsible for rendered attribute), then this change won't be retained in the subsequent requests. So the rendered attribute effectively evaluates to false and the component and all its children won't be processed anymore during the submit.
The view scope is intended to solve exactly this problem. The bean will live as long as you're interacting with the same view by ajax requests, until you navigate away to a different view or recreate the view. As to the functional requirement of recreating the form on change of <rich:select>, just do that inside the doRenderTipoPersona() method.
If you really need to stick to the request scope, then you'd need to retain the bean's properties manually based on the request parameter map inside the (post)constructor.
Instead of using to event function you can use the single ajax function
<rich:select id="tipoPersona"
required="true" value="#{userInformationController.tipoPersona}"
requiredMessage="Seleccione el tipo de persona"
defaultLabel="Seleccione una opción">
<f:selectItems value="#{userInformationController.tipoPersonaOpciones}"/>
<f:ajax event="valueChange"
render="tipoPersonaMessage outputLabelCURP inputTextCURP messageCURP outputLabelRFC inputTextRFC messageRFC"
listener="#{userInformationController.doRenderCURP}"/>
</rich:select>
Well this is a solution.
<a4j:jsFunction name="onBlurRFC" execute="RFC" render = "rfcMessage identificadorSURI"
action="#{userInformationController.doSearchIdSURI}" />
<h:inputText id="RFC" required="true"
requiredMessage="Introduzca el RFC"
value="#{userInformationController.rfc}"
rendered="#{userInformationController.personaMoralRendered}" onblur="onBlurRFC()">
</h:inputText>
I have bean struggling to understand how to use the rich:popupPanel component in the right way. There are (at least not that I could find) few post about how to use the rich:popupPanel and how to submit values from it.
To make matter worse the panel seams to add (when checking the html) a hard coded "_content" to its component id name (to the div generated). I have tried to use aj4:region tag to partial render the complete form. But that didn't seamed to work, cause nothing where posted to managed bean. So now I have one option left, where the panel has its own form, outside the main one on the page.
I can see that the evaluation of the form (popup) values is happening, but not the execution of the bean function that persist the values (I see the POST request of the command button). The only reason I can think of at the moment, is that the pop-up panel use another bean to persist the values that the main form on the page (both of them are session scoped).
I am thinking of omit the pop-up panel all together, since it seams so hard to make this work. Maybe its a well know secret, since it so few post about it. It behaves the same if if use componentController or only a a4j:commanLink.
How is it possible to submit values from a rich:popupPanel and invoke a backing bean function to persist the pop-up form values ?
Appreciate if someone can shed some light on this, greetings Chris.
I use Richfaces 4.0-final on Glassfish 3.1
<h:form id="main_form">
<!-- Command for popup -->
<a4j:commandLink actionListener="#{userController.prepareCreateSysRequest}" oncomplete="#{rich:component('popup_sys_user_req_form:popup_sys_user_req')}.show(); return false;"
execute="#this" value="Request New Sector/Category" />
...
<a4j:commandButton action="#{projectController.Create}" ...>
</h:form>
<h:form id="popup_sys_user_req_form">
<rich:popupPanel id="popup_sys_user_req" modal="true" autosized="true" resizeable="false">
<f:facet name="header">
<h:outputText value="New Project Request" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#"
onclick="#{rich:component('popup_sys_user_req')}.hide(); return false;">
X
</h:outputLink>
</f:facet>
<h:panelGrid columns="2">
<h:outputLabel value="Request New:" />
<h:selectOneMenu id="sys_req_type" value="#{userController.selectedSysRequestType}" required="true" requiredMessage="Request Type is required" title="Request Type">
<f:selectItems value="#{userController.getSysRequestTypeItems()}">
</f:selectItems>
</h:selectOneMenu>
<h:outputLabel value="Description:" />
<h:inputTextarea id="user_req_desc" value="#{userController.selectedSysUserRequest.description}" required="true" requiredMessage="Decription is missing" />
</h:panelGrid>
<a4j:commandButton action="#{userController.CreateSysUserRequest}" onclick="#{rich:component('popup_sys_user_req')}.hide(); return false;" execute="#form" render="popup_sys_user_req_form" value="Send Request" />
</rich:popupPanel>
</h:form>
For what I have done I used to have the issue to got to submit twice only the first time.
To fix it the form got to be outside the popupPane. And also that the popupPanel should have the attibute domElementAttachment="form".
Example.
<h:form>
<rich:popupPanel id="shipmentItemUpdateDialog"
autosized="true"
domElementAttachment="form">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="#{shipmentBundle.shipmentItemDetailsHeader}" />
</h:panelGroup>
</f:facet>
<f:facet name="controls">
<h:commandLink>
<h:graphicImage value="/core/images/modal/close.png"/>
<rich:componentControl target="shipmentItemUpdateDialog" operation="hide" />
</h:commandLink>
</f:facet>
<h:outputText for="shipmentItemName"
value="#{coreBundle.requiredChar} #{shipmentBundle.shipmentItemName}"
/>
<h:inputText id="shipmentItemName"
disabled ="false"
required ="true"
value="#{shipmentItemController.shipmentItemUI.value.name}"
label="#{shipmentBundle.shipmentItemName}"
size="40" >
</h:inputText>
<h:outputText for="shipmentItemCode"
value="#{coreBundle.requiredChar} #{shipmentBundle.shipmentItemCode}"
/>
<h:inputText id="shipmentItemCode"
disabled ="false"
required ="true"
value="#{shipmentItemController.shipmentItemUI.value.code}"
label="#{shipmentBundle.shipmentItemCode}"
size="40" >
</h:inputText>
<h:outputText value="#{coreBundle.requiredChar} #{shipmentBundle.shipmentItemAmount}"
/>
<h:inputText id="shipmentItemAmount"
disabled ="false"
required ="true"
value="#{shipmentItemController.shipmentItemUI.value.amount}"
label="#{shipmentBundle.shipmentItemAmount}"
size="4" >
<f:validateLongRange minimum="1"/>
</h:inputText>
<h:outputText value="#{coreBundle.requiredChar} #{shipmentBundle.shipmentItemNeedsCooling}"
/>
<h:selectBooleanCheckbox id="shipmentItemNeedsCooling"
disabled ="false"
required ="true"
value="#{shipmentItemController.shipmentItemUI.value.needsCooling}"
label="#{shipmentBundle.shipmentItemNeedsCooling}"
/>
<h:outputText for="shipmentItemDetails"
value="#{shipmentBundle.shipmentItemDetails}"
/>
<h:inputTextarea id="shipmentItemDetails"
disabled ="false"
required ="true"
value="#{shipmentItemController.shipmentItemUI.value.details}"
label="#{shipmentBundle.shipmentItemDetails}"
cols="38"
rows="5"
/>
</h:panelGrid>
<h:panelGrid columns="1" dir="LTR">
<h:panelGrid columns="2" dir="LTR">
<a4j:commandButton value="#{coreBundle.acceptButton}"
action="#{shipmentItemController.onUpdate()}"
render="shipmentItemsTable">
</a4j:commandButton>
<h:commandLink value="#{coreBundle.closeLink}"
immediate="true">
<rich:componentControl target="shipmentItemUpdateDialog" operation="hide" />
</h:commandLink>
</h:panelGrid>
<h:outputText value="#{coreBundle.requiredText}"/>
</h:panelGrid>
</rich:popupPanel>
</h:form>
I hope this helps.
I think you got it right.. think of the pop-up as a regular page. To submit and close the pop-up, do something like this:
<a4j:commandButton value="Save" onclick="#{rich:component('panelId}.hide();" render="..."/>
Hope this helps..