I have a table and each row has a delete button. After clicking on delete button, a confirm dialog should appear. In this dialog, there is only one required input field and a cancel and delete button. If the filed is filled, everything is ok, but if it will be left blank, the field will be red highlighted with a message under it, that the user should enter a value. At this moment, if I want to enter a value, I can not do it. Only if I close the dialog and click on the delete button again, the dialog comes again with the field still highlighted and I am able to enter a value. Why isn't it possible to enter a value directly after validation?
I have seen several problems here regarding updating an inputText field after validation failed, but I think I have another problem.
xhtml:
<h:form id="dialogForm"> ...
<p:inputText id="comment" value="#{myController.comment}" maxlength="14" required="true" placeholder="please enter a comment"/>
<p:message for="comment"/> ...
<p:commandButton value="#{message.delete}"
action="#{myController.doDelete()}"
process="#form"
update="#form"
oncomplete="if (!args.validationFailed){
PF('dialog').hide();}"/> ...
</h:form>
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 use Richfaces 3.1.2 and JSF 1.1
I have a textarea with two buttons inside a form : Submit and Update
the button Submit submits the form
One click on the button Update adds some text in the textarea
A validator is used inside the textarea, this validator throws an exception if the textarea only contains the name of the current connected user, for instance if the current connected user is "root" and the textarea contains "root", then an exception should be thrown
The code of the Textarea (by default it contains the name of the current connected user):
<h:panelGroup id="messagePanel">
<h:inputTextarea id="message" label="Update" value="#{beanName.message}">
<f:validator validatorId="messageValidator" />
</h:inputTextarea>
</h:panelGroup>
The submit button :
<h:commandLink id="validerLink" value="Submit" action="accueil"
actionListener="#{beanName.saveInformation}">
<f:param value="#{param.evenementId}" name="evenementId" />
</h:commandLink>
And the update button :
<a4j:commandLink id="inclureRapportLink" value="Update"
actionListener="#{beanName.updateText}" reRender="message">
<f:param name="evenementId" value="#{param.evenementId}" />
</a4j:commandLink>
The problem : If the textarea contains the name of the current connected user, the button Update doesn't update the text because the validator throws an exception.
So what I want to do is to disable the validator, but only if the user clicks on the button Update
I tried to add immediate="true" in the update button, but that didn't worked because apparently immediate="true" and reRender="message" doesn't work together (The bean is updated, but not the front).
I also tried this solution here : Skip validation on re-render and apply only on form submit but that didn't worked either, I got the error Undefined property clientId, and the validator is called even if the required property is set to false.
Can someone help me?
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" />
I have a page which contains <input type="text"> fields which have the required="true" attribute set. I also have a save button which submits the form.
Unfortunately, the form submits even if the required="true" field is left empty.
This is my current code:
<s:decorate template="layout/edit.xhtml" id="decAQty">
<ui:define name="label">Actual Qty Received</ui:define>
<h:inputText
value="#{tktReceivingInfoHome.instance.actualReceivedQty}"
required="true" id="txtAQty"
converterMessage="Not a valid Quantity">
<a:ajax event="blur" render="txtAcTotal,decAQty"
listener="#{returnsReceivingManager.setActualTotal}" />
<h:messages id="error" style="display:none" />
</h:inputText>
<a:commandButton id="btnSave"
action="#{returnsReceivingManager.checkQtyDiff}" value="Save"
render="decSQty,decScQty,decRtvQty,addForm,decAQty,decRecdDate,decRecWH,decErrorRMA,decErrorRTV,decReason,decStatusRMA,decStatusRTV,decPriority,decResolution"
oncomplete="#{returnsReceivingManager.rmaInfo.qtyDiff!=0 ? '#{rich:component(\'addPanel\').show();' : 'callSave();'}"
onclick="showProgressBar()" />
<a:jsFunction action="#{returnsReceivingManager.save}"
oncomplete="hideProgressBar()" name="callSave" />
When I click the save button, I can see the message pop up indicating that the value is required, but it then disappears and gives me a message stating that the transaction is failed.
In other words, it appears that the page is being submitted twice. I'd love any suggestions that the community can provide about how to resolve this issue.
At the moment validation is only triggered on leaving the txtAQty field (blur event). That's why you see the error message. What happens next is the click on the save button, which performs rerendering of some fields, but without processing (including validation) of any field. That's why the error disappears.
You should add the process attribute to the commandButton with values listing at least the txtAQty field (but even better also all the other fields which you are rerendering)
I have h:selectOneMenu component in my page. User has to select "Yes" or "No" there, initial value is null (labelled "Unknown"). In bean it's Boolean, so null is possible. If user selects valid value, e.g. "Yes", hits Next, true is saved in the bean.
Now user can go back to this page, and select "Unknown", which is not a valid value. When user hits Next now, error message is shown. It is ok, but value is changed to "Yes" then. It is updated from the bean. This way it changes what user entered, which is not required behaviour. Is it possible to keep user's value?
<h:form id="co">
<h:selectOneMenu id="isCeded"
value="#{bean.boolValue}"
required="true"
requiredMessage="#{msgs.please_select_value}">
<f:selectItem itemLabel="#{msgs.unknown}"/>
<f:selectItem itemValue="true" itemLabel="#{msgs.yes}"/>
<f:selectItem itemValue="false" itemLabel="#{msgs.no}"/>
<f:ajax execute="#this" render="isCededMsg"/>
</h:selectOneMenu>*
<h:message id="isCededMsg" for="isCeded" errorClass="invalid"/>
<h:commandButton id="submit" value="Next" action="#{bean.submit}" />
</h:form>
What is strange, this behaviour takes place only when user enters null to fields where null is not valid value. If e.g. user enters another invalid value in some validated text field (e.g. 20 digits where only 10 are allowed) invalid value entered by user remains after clicking "Next". Only error message apperas.
This appears to be a bug, that doesn't look like getting fixed. See the JIRA link mentioned in this question: h:selectOneMenu with Please select displays previous selection on validation error
The question and the JIRA issue have the solution. You need to extend the MenuRenderer and override the renderOption method with the patched code mentioned at the end of the JIRA issue.