I've created a textField with JSF and want it to update a table myTable when the user inserts a String.
I've tried this
<h:inputText id="searchHeader" value="#{myBean.searchStringFirstname}"
valueChangeListener="#{myBean.searchByFirstnameValueChanged}" >
<f:ajax render="myTable"/>
</h:inputText>
and this
<h:inputText id="searchHeader" value="#{myBean.searchStringFirstname}">
<f:ajax listener="#{myList.searchByFirstname}" event="valueChange"
execute="myTableForm" render="myTable" />
</h:inputText>
I want the event to fire every time the value of the InputField gets changed, but in both cases the eventListener method specified by valueChangeListener only gets called when the user hits the enter key.
Why is that?
I've tried this solution JSF2 search box but I could not make it work.
Related
Using JSF and PrimeFaces 6.1 I have an inputText field as such:
<p:inputText value="#{backingBean.stringField}">
<p:ajax event="valueChange" update="#form" />
</p:inputText>
and within the same form is a commandButton:
<p:commandButton id="btnDoThatThing"
ajax="true"
immediate="true"
update="#form"
process="#this"
action="#{backingBean.doThatThing}"/>
When I
make a change to the inputText field,
then click somewhere OTHER THAN the command button
click the command button
everything works exactly as expected. BUT if I:
make a change to the inputText field,
immediately the command button
The button is NOT fired since the first click of the commandButton is triggering the valueChange event to happen in the inputText field.
If I click it a second time the button action finally happens.
Now, if i change the p:ajax event="valueChange" to p:ajax event="keyup" the first click of the commandButton work as expected, but unfortunately the keyup event on a inputField is pretty hacky and you lose functionality within the field (copy/paste text, text selection, 'fast' typing' etc)
Any thoughts on how to initiate the change event in the inputText field, AND fire the commandButton action when the user clicks the button immediately from typing in the inputText field?
First your valueChange is triggered. This updates the form including the button. Not 100% sure if this is browser dependent, but in Chromium (Linux), the click on the previously rendered button (before it has been updated) is not executed.
I could get it working when I changed the update expression into a selector. My expression updates the elements I needed to be updated excluding the button(s). In my case:
<p:ajax update="#(form :input:not(button))" />
Note that the change event is default for inputs, so I've removed event="valueChange".
Of course you do not need to use a selector. You can also just update a component (like a panel) which does not contain the button:
<p:ajax update="yourPanel" />
Also, ajax="true" is default for a p:commandButton, so you can remove that.
In my case, I solved the same problem removing the following statement from my page (Primefaces 11.0):
<p:ajaxStatus onstart="PF('statusDialog').show()" onsuccess="PF('statusDialog').hide()"/>
Somehow the onstart event overrides the click event and only one event is processed: change.
on valuechange event of select one menu component, i can see the changes applied to the model / java, but i dont see changes applied to input components on page.
when i do a F5, i see the changes but other data input by user gets lost.
i want to do a refresh without user loosing his data entered which is not submitted yet.
how can this be achieved using jsf ajax.
i am calling java code using f:valueChangeListener. for ajax i am using a4j:ajax
<h:selectOneMenu rendered="" value="" immediate="true">
<f:selectItems value="" />
<a4j:ajax event="change" execute="#this" render="#form" />
<f:valueChangeListener binding="" />
</h:selectOneMenu>
I have an inputText with a nested a4j:ajax call. When I change its value and leave the field using tab, the ajax call is fired. However, if after changing the value I leave the field with the mouse (by clicking in any other field), the ajax call is NOT fired. Why?
I'm using JBoss 6.1.0.Final, Mojarra 2.1.28, RichFaces 4.2.3.Final and java 1.6.0.20.
<h:inputText
id="revenue"
value="#{myMB.revenue}">
<f:convertNumber
type="number"
minFractionDigits="2"
maxFractionDigits="2"
locale="pt_BR" />
<a4j:ajax
event="change"
execute="revenue"
listener="#{myMB.doSomething}"></a4j:ajax>
</h:inputText>
I try to get experiment with ajax. I want that string from inputText typing to outpuLabel.
<h:form>
<h:inputText id="str" value="#{f.str}">
<f:ajax render="num"/>
</h:inputText>
<h:outputLabel id="num" value="#{f.str}">
</h:outputLabel>
</h:form>
But the value of num update only when i'm typed and clicked the mouse, not during typing to str. How do that the num will be updating during the typing?
The <f:ajax event> defaults in case of UIInput components to valueChange which renders in case of <h:inputText> the ajax call in the onchange attribute of the generated <input type="text"> element (you can see it yourself by opening the JSF page in webbrowser and do rightclick and View Source).
So, the ajax request is only fired when the HTML DOM change event is fired. That is, when you change the value of the input element and then the input element loses focus (blurs).
As per your functional requirement, you actually want the ajax request to be fired when the HTML DOM keyup event is fired. In that case, you'd need to explicitly specify that.
<f:ajax event="keyup" ... />
See also:
What values can I pass to the event attribute of the f:ajax tag?
I have a problem with a JSF 2 form that contains an ajax field. When I use the mouse to press the submit button of the form while the cursor is still in the ajaxified input field the input value of the field does not get submitted before the action is triggered in the backing bean. Also the attached validator and converter are not triggered.
<h:form id="invoice">
...
<h:inputText value="#{invoiceBean.amount}" required="true" validator="#{invoiceBean.validateAmount}">
<f:converter converterId="CurrencyConverter" />
<f:ajax event="blur" render="#this"/>
</h:inputText>
<h:commandButton action="#{invoiceBean.processInvoice()}" />
</h:form>
I also tried to enhance the command button with <f:ajax /> but the result stayed the same. Other (non-ajax) fields on the same form (not shown in the code snippet above) are submitted correctly. The ajax field is also submitted, converted and validated if I click somwhere else on the page before submitting but not when using the button directly.
Is there anything I am missing to have the field also be submitted on/before form submit?
Regarding the <h:inputText> ajax behaviour: use <f:ajax> with the default event valueChange, which is the default event for all input components. This is indeed equivalent to omitting the event attribute:
<f:ajax render="#this" />
Regarding the <h:commmandButton> component, don't forget to specify the execute attribute of <f:ajax>:
<f:ajax execute="#form" />
otherwise it will default to #this, therefore rendering vane your effort.