Trying to fill h:selectOneMenu when date is selected - jsf

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" />

Related

Primefaces 5: selectOneMenu isn't making listener calls after being updated

Code worked in a older version of Primefaces, but is failing in Primefaces 5.0. It's supposed to let a user pick an item in the first selectOneMenu (Group), which populates the second selectOneMenu (that part works). When the user selects an item from the second selectOneMenu, it's supposed to pull the matching code and update the Code, which isn't working. I can see that the listener in the Sub Group selectOneMenu isn't being called.
What am I doing wrong?
<h:outputLabel for="group" value="Group: *" />
<p:selectOneMenu id="group" label="Group" value="#{codeViewController.model.group}" style="width:100%">
<f:selectItems value="#{Session.groups}" />
<p:ajax event="change" listener="#{codeViewController.fetchSubGroup}" update="subGroup"/>
</p:selectOneMenu>
<p:message for="group" />
<h:outputLabel for="subGroup" value="Sub Group: *" />
<p:selectOneMenu id="subGroup" label="Sub Group" value="#{codeViewController.model.subGroup}" style="width:100%">
<f:selectItems value="#{codeViewController.model.subGroups}" />
<p:ajax event="change" listener="#{codeViewController.fetchCode}" update="code"/>
</p:selectOneMenu>
<p:message for="subGroup" />
<h:outputLabel for="code" value="Code: *" />
<p:inputText id="code" value="#{codeViewController.model.group.id.code}" label="Code">
<f:validateLength minimum="5" />
</p:inputText>
<p:message for="code" />

How to make required message dissapear when h:selectOneMenu value is changed?

I'm having a trouble with getting rid of required message.
I have a form in which I have a few fields and a button.
When I press a button there is validation that checks if required fields where filled with values if not then required message is displayed for invalid value/component.
Now I want to select a value from selectOneMenu or type something into inputText and when I do that I want the required message to dissapear without need to press the button again.
How would you do that?
I've tried to remove message with sth like this, but it doesn't seems to work:
Iterator<FacesMessage> msgIterator = FacesContext.getCurrentInstance().getMessages();
while (msgIterator.hasNext())
{
FacesMessage facesMessage = msgIterator.next();
msgIterator.remove();
}
Could you help me with that?
Here is example code:
<h:form id="mainForm">
<h:selectOneMenu required="true" id="dictionaryValueId" value="#{SomeBean.dictionarySelectedValue}">
<f:selectItem itemValue="#{null}" itemLabel="#{i18n['view.choose']}" />
<f:selectItems value="#{SomeBeanBean.dictionaryValuesMap}" var="element"
itemLabel="#{element.descripption}" itemValue="#{element.key}" />
<f:ajax event="change" execute="#this msgId" render="msgId dictionaryValueId"/>
</h:selectOneMenu>
<h:message id="msgId" style="display:none;" for="dictionaryValueId" />
...
<h:commandButton value="#{i18n['button.forward.name']}"
actionListener="#{SomeBean.forward}" >
<p:ajax process="#form" update="mainForm"/>
</h:commandButton>
I am not sure, but is not there a problem with
style="display:none;"
for
<h:message id="msgId"/>
You can wrap your message with <h:panelGroup/> and render by this panelGroup Id, this Id will be always present on your form.
<h:form id="mainForm">
<h:selectOneMenu required="true" id="dictionaryValueId" value="#{SomeBean.dictionarySelectedValue}">
<f:selectItem itemValue="#{null}" itemLabel="#{i18n['view.choose']}" />
<f:selectItems value="#{SomeBeanBean.dictionaryValuesMap}" var="element" itemLabel="#{element.descripption}" itemValue="#{element.key}" />
<f:ajax event="change" execute="#this" render="messageBundle1 dictionaryValueId"/>
</h:selectOneMenu>
<h:panelGroup id="messageBundle1">
<h:message id="msgId" style="display:none;" for="dictionaryValueId" />
</h:panelGroup>
<h:commandButton value="#{i18n['button.forward.name']}"
actionListener="#{SomeBean.forward}" >
<p:ajax process="#form" update="mainForm"/>
</h:commandButton>
</h:form>

primefaces calendar doesn't display when update

I got a problem with the Primefaces calendar.
It is not show in my Application when updated from other side.
Here, the primefaces calendar it's perfect working
<p:outputPanel id="calTask">
<p:calendar id="calendarTask" value="#{taskAddBean.dateEnd}" showOn="button">
<p:ajax event="dateSelect"
listener="#{taskAddBean.changeDates}"
/>
</p:calendar>
</p:outputPanel>
but in the next case, the primefaces calendar doesn't display de popup.
<h:selectOneMenu value="#{taskAddBean.selectedActType}">
<f:selectItems value="#{taskAddBean.lstActType}" />
<p:ajax listener="#{taskAddBean.actTypeChanged}"
update="calTask" />
</h:selectOneMenu> </div>
<p:outputPanel id="calTask">
<p:calendar id="calendarTask" value="#{taskAddBean.dateEnd}" showOn="button">
<p:ajax event="dateSelect"
listener="#{taskAddBean.changeDates}"
/>
</p:calendar>
</p:outputPanel>
I don't understand what is the razon
Thanks :)

primefaces slider in ui:repeat

I am trying to create slider in ui:repeat but I encounter some problems with components ids.
More specifically, I have the following code:
<p:panel id="discounts3">
<ui:repeat value="#{myBean.list}" var="item" varStatus="status">
<p:panel header="Discount Schema #{(status.index+1)}">
<h:panelGrid columns="2" columnClasses="label, value"
styleClass="grid">
<h:outputText value="Paired solution: " />
<p:selectOneMenu value="#{item.pairedSolutionString}">
<f:selectItems value="#{step2bBean.solutionsListAsStrings}" />
</p:selectOneMenu>
<h:outputText value="Discount (%): " />
<h:panelGrid columns="3">
<h:outputText id="output#{(status.index+1)}"
value="#{item.discount}%" />
<h:inputHidden id="txt#{(status.index+1)}"
value="#{item.discount}" />
<p:slider for="txt#{(status.index+1)}"
display="output#{(status.index+1)}" style="width:150px"
displayTemplate="%{value}">
<p:ajax event="slideEnd"
listener="#{step2bBean.onSlideEnd2}" />
</p:slider>
</h:panelGrid>
</h:panelGrid>
</p:panel>
</ui:repeat>
</p:panel>
The problem is that despite the fact that Discount Schema #{(status.index+1)} is calculated correctly, the ids for example id="output#{(status.index+1)}" are not computed (for the specific example is set to "output").
I have tried also with dataTable with no luck.
Can you give me any hint please?
Thank you!

Validator is called but error message is not displayed

when i click on the command button. validate method is getting called but the error message is not getting displayed..
here is my code..
<h:form id="form">
<h:body>
<p:panel style="width:500px">
<h:outputLabel for="year" value="Select Year: *" style="font-weight:bold" />
<p:selectOneMenu id="year" value="#{leaveBean.year}">
<f:selectItem itemLabel="Select One" itemValue="null" />
<f:selectItems value="#{leaveBean.yearDTO}" var="currentUser" itemValue="#{currentUser.name}" itemLabel="#{currentUser.name}" />
<f:validator validatorId="LeaveCardValidator" />
</p:selectOneMenu>
</p:panel>
<p:commandButton value="Submit" action="#{leaveController.leaveCard}" update="updateList,updateDetails" id="button"/>
<h:message for="year" style="color:red"/>
You seem to expect that JSF auto-updates the <h:message> on every ajax request. This is untrue. Perhaps you're confusing with PrimeFaces <p:messages> or <p:growl> which have each an autoUpdate attribute which enables you to tell them to auto-update themselves on every ajax request.
You really need to make sure that the <h:message> is covered by the ajax update. Just give it an ID
<h:message id="yearMessage" ... />
and include it in the client ID collection of the ajax update
<p:commandButton ... update="updateList updateDetails yearMessage" />
An alternative would be to replace <h:message> by <p:messages autoUpdate="true">.
Not sure where are the updateList and updateDetails are located but in the example give above you should use update="#form" instead or in addtion like this:
update="updateList updateDetails #form"
so that the form will be rendered again...
just use one of these :
update the whole form in order to update the content of
<h:message />
<p:commandButton value="Submit" action="#{leaveController.leaveCard}" update="#form" id="button"/>
or give the <h:message /> an id and id this id to the <p:commandButton/>
<h:message id="msg" for="year" style="color:red"/>
<p:commandButton value="Submit" action="#{leaveController.leaveCard}" update="updateList,updateDetails,msg" id="button"/>

Resources