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?
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.
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.
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.
I have an input textbox that accept a name, process the name in reverse order, and then output it to another textbox. Whenever I input the value and click anywhere on the page (means lost focus from textbox), the output textbox will get update automatically.
When I open up the source code I found something like code below, may I know what does the ajax thing do to the inputtext component?
<h:inputText id="name" value="#{helloBean.name}">
<f:ajax render="printMyName"/>
</h:inputText>
<h:outputText id="printMyName" value="#{helloBean.reverseName}"/>
Taken from Learning JSF2: Ajax in JSF – using f:ajax tag
Sending an Ajax request
JSF comes with one tag to send an Ajax request, the tag is called
f:ajax. This tag is actually a client side behavior. Being a behavior
implies it’s never just used by itself on a page, it is always added
as a child tag (behavior) to another UI component (or can even wrap
several components). Let’s use a small echo application to demonstrate
usage of this tag.
<h:form>
<h:panelGrid>
<h:inputText value="#{bean.text}" >
<f:ajax event="keyup" render="text"/>
</h:inputText>
<h:outputText id="text" value="#{bean.text}" />
</h:panelGrid>
</h:form>
Code snippet above takes care of firing an Ajax request based on onkeyup event. Notice the actual event name is keyup. This takes care of firing an Ajax request. Next we need to figure out how to do partial view rendering.
Attribute Description event:
String on which event Ajax request will be
fired. If not specified, a default behavior based on parent component
will be applied. The default event is action for ActionSource (ie:
button) components and valueChange for EditableValueHolder components
(ie: input). action and valueChange are actual String values that can
be applied applied event attribute.
I have an input text and a button on the form. I process event onchange for input text and onclick for button. If the user changes the text and then click the button 2 events fired and sometimes they are processed simultaneously.I would like onclick to be processed after onchange completed. For this I use <a4j:queue name="myQueue"/> and mark events with <a4j:queue name="myQueue"/> like this:
<a4j:queue name="myQueue"/>
...
<h:inputText id="dateFromText" value="#{flowScope.fileSearchCriteria.fromDateStr}">
<a4j:support event="onchange" eventsQueue="myQueue" reRender="datePanel1"
actionListener="#{fileSearchCriteria.changeTextFromDate}"/>
</h:inputText>
....
<h:commandButton id="fileInSearch" action="fileInSearch"
value="#{resourceBundle.searchIn}" type="submit">
<a4j:support eventsQueue="myQueue" event="onclick"/>
</h:commandButton>
...
And as a result, onclick is processed not every time after onchange.
You should have two events each time, onchange and onclick. But, I'd recommend to switch to a4j:commadnButton instead of using h:commandButton with a4j:support inside.