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.
Related
https://www.primefaces.org/showcase/ui/ajax/event.xhtml
I want do that same what in showcase but without refreshing page. Like: setting value in inputtext and click on button to view result, but if i have <p:ajax event="blur" />or <p:ajax/> then i must click two times on the button
<p:inputText id="data" value="#{buttonView.data}">
<p:ajax/>
</p:inputText>
<p:commandButton value="Ajax Submit" id="ajax" actionListener="#{buttonView.buttonAction}" />
Maybe something like use outpupanel and update that panel in commandbutton?
If you are to use the <p:commandButton /> then the form will be submitted. In this case use update attribute of <p:commandButton /> to update the target component.
If you want to update another component as soon as you type then use <p:ajax event="keyup" update="your_target_component_id" /> to update your target component. (YOur event can be keyup, keypress, change, blur, etc.)
I don't understand why are you mixing the concept of using p:ajax with the functionality of the p:commandButton.
Basically, usage of p:ajax is intended to partially process the
field(s) value and update the component(s) of the form even without
submitting it.
Example:
You have Countries and States drop-downs (pre-populated) on a screen (let's say registration) with some other fields, but if user changes the country, you need to refill the States drop-down and update on the screen asynchronously. There you need to use the p:ajax.
On the other hand, p:commandButton is intended to submit the form
(not to update the components initially). However, it also supports
the updating of the components using update attribute.
Example:
Now, reconsider the above example with similar drop-downs (but disabled with fixed values). Now you know that your screen has nothing to be updated and you just have to tackle with validation (if any) and submit the form (update if required).
As far as you are concerned with using the p:ajax on the p:inputText for some asynchronously updates on the screen and p:commandButton to finally submit the form, that totally depends on your requriement.
Instead p:ajax try f:ajax. You can use < f:ajax event="change" render="#this"/>
once the value gets change, same will reflect in backing bean.
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 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 required input field in a p:dialog. If firstly I submit nothing for the field, a validation error happens on that field. Then I close the dialog and reopen it, the validation error still exists. What can I do to eliminate the validation error when close the dialog?
You should use the p:resetInput on the element that you have to open the dialog.
For example if you use a p:commandButton
<p:commandButton value="Open dialog" update=":dialogId" oncomplete="PF('dialogWidget').show()" >
<p:resetInput target=":dialogId" />
</p:commandButton>
This will reset the cached values (including the validation messages) upon opening the dialog.
I was able to reproduce your case and you could do the following:
Make your dialog closable="false".
Add a Cancel button that will hide the dialog.
Add a resetInput component from Primefaces Extensions inside your Cancel button. This will clear the form validations and values.
Here is an example that assumes your dialog as a widgetVar named wvDialog.
<p:commandButton value="Cancel" immediate="true" onclick="wvDialog.hide()">
<pe:resetInput for="myDialogFormId />
</p:commandButton>
You could even call a bean method in the button actionListener if you need.
I hope it helps.
Update the p:dialog or p:message every time you submit the Form.
You can do that by using update attribute of p:commandButton.
<p:commandButton update="ID_OF_DIALOG" />
<a4j:ajax render="tree">
<h:selectBooleanCheckbox id="checkEntry" value="#{bean.selected}" immediate="true" disabled="false" valueChangeListener="#{bean.changeActive}"/>
</a4j:ajax>
My checkbox for JSF is triggering the event "bean.changeActive", when I uncheck my checkbox..but when rechecking it, it doesn't trigger
The form tag is properly used..
any help on this regard is appreciated..
You're actually not interested in the value change event. You are interested in the click event. The checkbox value remains the same. It's only the checked state which changes. It's the checked state which controls whether the value will be sent or not.
Use the click event instead and attach a listener on it.
<a4j:ajax event="click" listener="#{bean.changeActive}" render="tree">