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" />
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'm using primefaces 5.0 and I have this situation:
<composite:implementation>
<p:dialog id="confirmDialog#{cc.attrs.someParam}"
rendered="#{cc.attrs.nextState.warnRequired}" severity="alert" resizable="false" modal="#{cc.attrs.modal}"
widgetVar="confirmation#{cc.attrs.someParam}">
<p:commandButton value="#{msg[cc.attrs.nextState.buttonKey]}" icon="#{nextStatus.icon}"
action="#{someActionCalled}"
update="#{cc.attrs.update}" process="#{cc.attrs.process}"
oncomplete="if (!args.validationFailed) { PF('confirmation#{cc.attrs.someParam}').hide(); }">
</p:commandButton>
<p:commandButton id="decline" value="#{msg['action.cancel']}" icon="ui-icon ui-icon-cancel"
onclick="PF('confirmation#{cc.attrs.someParam}').hide()" />
</p:dialog>
</composite:implementation>
When i click "decline" / cancel button, confirmDialog is closed / hides. Thats ok.
Obviusly confirmation#{cc.attrs.someParam} can find widgetVar and closes this dialog.
But when i click first button to confirm and take some action in back bean i get :
Widget for var 'confirmationSomeParam' not available!
primef...mefaces (line 1)
detailed error: TypeError: PF(...) is null
{cc.attrs.someParam}
is passed into component. Its evaluated clean and values are there ( obviusly because second button can close dialog.
So its very strange that first button cant find this dialog widgetVar and second one can ?
So i had time again to check this critical part of my application and im posting here so someone in future maybe will find this usefull :)
I have added p:remoteCommand under both buttons in code:
<p:remoteCommand name="somethingToDo" update="#{cc.attrs.update}" />
and in first button i have removed update param.
Why ? Because as error says, it could not find some dialogId ( in this example 'confirmation332m' ) and because of that update param, which was updating whole form, dialog was removed / updated.
So i moved update param from button to remote command and in
onComplete i just call somethingToDo(); after all validation is checked.
Maybe its not best solution but for now it works ;)
PF forum link ( for future problems ): http://forum.primefaces.org/viewtopic.php?f=3&t=37851
I have a dialog which is closed with the following button:
<p:commandButton
onclick="propertyEditDialog.hide(),propertyEditDialog.loaded=false"
value="#{i18n['button.cancel']}" ajax="true"/>
There is no action, only client side javascript that simply hides the dialog. However, I've seen in the logs, that the form is validated on cancel. I've set the ajax="true" to prevent form validation, but it not helped anyway.
What is the right way to close the dialog in PrimeFaces without validating the form?
ajax="true" is the default behaviour of p:commandButton!
The right way would be to exclude the inputs of beeing processed. With the attribut process="#this" in the commandButton, only the button should be processed.
But if you dont want to fire some action and do not want to submit the form, maybe you better use a push-button (instead of a submit-button) by adding the attribute type="button" to your commandButton.
You can use attribute immediate="true" to avoid validation.
<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">
I have a form with a validator on one field. I have two h:commandButtons: Ok and Cancel. When I input wrong data and click Cancel, I get a validation message. What must I do that validator don't run when I click cancel?
In case you aren't using ajax, or are still on JSF 1.x, and you really need to invoke a business action in cancel() method (i.e. just reloading the page is insufficient), then your best bet is to add immediate="true" to the button. This way all input fields which don't have immediate="true" will be skipped in processing.
<h:commandButton value="Cancel" action="#{bean.cancel}" immediate="true" />
On JSF 2.x, much better is to submit the form by <f:ajax>, which by default only processes #this instead of #form.
<h:commandButton value="Cancel" action="#{bean.cancel}">
<f:ajax />
</h:commandButton>
If you want to navigate to another page here, add ?faces-redirect=true to the outcome in the cancel() method.
Or, if you actually don't need to invoke any business action at all, then just use <h:button> wherein you directly specify the (implicit) navigation case outcome.
<h:button value="Cancel" outcome="previouspage" />
This will basically reload the page by a GET request. The <h:button> doesn't exist in JSF 1.x, but you can also just use plain HTML+JS for that.
See also:
Why was "immediate" attribute added to the EditableValueHolders?
How to navigate in JSF? How to make URL reflect current page (and not previous one)
How to let validation depend on the pressed button?