I need to save values on Focus out in Inplace JSF. Currently the editor tag can be used but it will display a save/cancel button.
My requirement is to save the data on focus out.
This is the Inplace tag that i am using.
<p:inplace id="basic">
<p:inputText value="Edit Me" />
</p:inplace>
Is there any ajax event like.
<p:ajax event="Something like focusOut" listener="#{bean.myFunction()}"/>
My Code sample when i use Blur as ajax event
<p:inplace label="#{serviceCalendarViewManagedBean.selectedService.statusStr}" id="ajaxInplaceStatusEdit" >
<p:ajax event="blur" listener="#{serviceCalendarViewManagedBean.inplaceEdit('StatusEdit')}" update="view" oncomplete="scheduleWidget.update();"/>
<p:selectOneMenu id="statusEditImplace" required="true"
value="#{serviceCalendarViewManagedBean.selectedService.status}"
label="text">
<f:selectItems value="#{serviceCalendarViewManagedBean.serviceStatusList}"
var="status" itemLabel="#{status.title}" itemValue="#{status.id}" />
</p:selectOneMenu>
</p:inplace>
The error message That i get when using this event
/WEB-INF/views/service/servicecalendarview.xhtml #886,153 <p:ajax>
Event:blur is not supported.
You're looking for the onblur event:
Execute a JavaScript when a user leaves an input field:
JSF code:
<p:ajax event="blur" listener="#{bean.myFunction()}"/>
EDIT: from your posted code, the <p:ajax> affects the <p:inplace> where it should affect the <p:selectOneMenu>. Move the <p:ajax> inside the <p:selectOneMenu>:
<p:inplace label="#{serviceCalendarViewManagedBean.selectedService.statusStr}"
id="ajaxInplaceStatusEdit" >
<p:selectOneMenu id="statusEditImplace" required="true"
value="#{serviceCalendarViewManagedBean.selectedService.status}"
label="text">
<f:selectItems value="#{serviceCalendarViewManagedBean.serviceStatusList}"
var="status" itemLabel="#{status.title}" itemValue="#{status.id}" />
<p:ajax event="blur" listener="#{serviceCalendarViewManagedBean.inplaceEdit('StatusEdit')}"
update="view" oncomplete="scheduleWidget.update();"/>
</p:selectOneMenu>
</p:inplace>
Related
I've a form, and i want it to show some inputs only if the user mark yes on a selectOneRadio.
Here is the code:
<p:selectOneRadio id="someSelectRadio" value="#{someBean.someClass.someSelectRadio}" >
<f:selectItem itemLabel="Sim" itemValue="Sim" />
<f:selectItem itemLabel="Não" itemValue="Não" />
//Here i use event=change to reconize if the user mark a option on selectOneRadio
<p:ajax event="change" process="someSelectRadio" update="panelGeral" />
</p:selectOneRadio>
//Here is the panel that i want to appear if the user mark selectOneRadio
<p:outputPanel id="panelGeral">
<p:panel id="panel" autoUpdate="true" rendered="#{someBean.someClass.someMethod}" />
</p:outputPanel>
I already have tryied to change event do click, on click, both doesn't work for me.
This may be due to the problem with event .
Change to
<p:ajax event="valueChange" process="someSelectRadio" update="panelGeral" />
More info
I have the following component on the xhtml:
<p:outputLabel for="concept" value="Concept" />
<p:selectOneMenu id="concept" value="#{dIGRCController.digrc.qconce}"
requiredMessage="Debe de seleccionar un concepto."
required="#{request.getParameter('validate')}">
<f:selectItem itemLabel="Concept" itemValue="" />
<f:selectItems value="#{cCRX1Controller.ccrx1.concepts.entrySet()}"
var="concepts" itemValue="#{concepts.key}"
itemLabel="#{concepts.value}" />
<p:ajax event="change" execute="#this" listener="#{dIGRCController.testing()}" />
</p:selectOneMenu>
The values are coming correctly from the cCRX1Controller class. However, when I select an option, I am trying to display the value. the #{dIGRCController.testing()} looks like this:
public void testing()
{
System.out.println("sdfsd");
}
What am I doing wrong? I checked this question but could't figure out what the problem is.
Try with this
<p:ajax process="#this" listener="#{dIGRCController.testing()}" />
I think the default of ajax event of Primefaces select one menu is valueChange event. So, try with using also
<p:ajax event="valueChange" process="#this" listener="#{dIGRCController.testing()}" />
I want to disable other input tag if p:calendar value is entered
<p:calendar id="someDate" value=.... binding="#{bind}" />
for example to disable p:selectOneMenu but this disables it permanently.
<p:selectOneMenu id="selectManu" value=... disabled="#{bind!=null}" >
How to disable it only if p:calendar have value ??
Let the source component ajax-update the target component on the desired events, and let the disabled attribute of the target component check if the value of the source component is not empty.
So,
<p:calendar ... value="#{bean.date}">
<p:ajax event="valueChange" update="menu" />
<p:ajax event="dateSelect" update="menu" />
</p:calendar>
...
<p:selectOneMenu id="menu" ... disabled="#{not empty bean.date}" />
The binding is not necessary in this construct. If you really want to use it, then you should be checking the component's value attribute, not the component itself (which is obviously never null).
<p:calendar binding="#{calendar}" ...>
<p:ajax event="valueChange" update="menu" />
<p:ajax event="dateSelect" update="menu" />
</p:calendar>
...
<p:selectOneMenu id="menu" ... disabled="#{not empty calendar.value}" />
If you want to learn more about binding, head to How does the 'binding' attribute work in JSF? When and how should it be used?
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 have problem with jsf. My jsf code is:
<h:form>
<p:selectOneMenu style="text-align:left;"
value="#{contractBean.selectedCust}" converter="CustomerConverter">
<f:selectItems value="#{classificatorBean.customerList}"
var="customer" itemLabel="#{customer.name} #{customer.sname}" itemValue="#{customer}" />
<p:ajax event="change" update="custTel" />
</p:selectOneMenu>
<p:inputText id="custTel" value="#{contractBean.selectedCust.name} " />
</h:form>
and I have managed bean (Contractbean) with getter and setter functions of selectedCust Customer object. My problem is when menu changed object dont show customers tel number.
try to use ajax like this:
<p:ajax event="change" process="#this" update="custTel" />