How to clear h:message or rich:message value in JSF? - jsf

I am developing a JSF application and I have many user forms where I use JSF validations.
I have an issue which annoys me, it will be easier to tell it with an example.
<h:panelGroup>
<h:selectOneRadio id="gender" value="#{registrationController.person.gender}"
required="true" requiredMessage="#{msg.commonErrorBlankField}">
<f:selectItems value="#{registrationController.genders}" />
</h:selectOneRadio>
<rich:spacer />
<rich:message for="gender" errorLabelClass="errorLabel">
<f:facet name="errorMarker">
<h:graphicImage value="#{msg.imageExclamation}" />
</f:facet>
</rich:message>
</h:panelGroup>
Above if a radio option is not selected a required message is displayed. And when the user makes a selection I see the validation error disseapeares. Fair enough !
My problem is when the user navigates to next page and then by using back button of the browser comes back to this page again I can see my gender field is selected accordingly but validation error is still displayed.
Does anyone know if there is a workaround to clear the h:message field once I click the command button so validation error won't be displayed when I go back to the same page?

Not sure if this works. I have not tested it:
//idComponent is the Component whose message you want to clear, e.g. gender
void clearMessageForComponent (final String idComponent) {
if (idComponent != null) {
Iterator<FacesMessage> it = FacesContext.getCurrentInstance().getMessages(idComponent);
while(it.hasNext()){
((FacesMessage)it.next()).setDetail("");
}
}
}

It is important to understand that the browser back button won't trigger a request to the server.
that is not entirely correct, modern browsers do trigger a request if data was posted in previous stages of the navigation.

Clearing the Messages from the FacesContext won't fix your problem, since this will affect only the server side state of your application. Pushing the browser back button forces the clients browser to reload the page from the local browser cache.
It is important to understand that the browser back button won't trigger a request to the server.

Related

Close dialog prior to navigate away from the page

PrimeFaces: 7.0
JSF: 2.2.13
JBoss: 7.1
Java: 1.8
Chrome: 83.0.4103.116
I have a simple confirmation dialog to go to another page, there a reason for the action should be provided as a text.
It boils down to the following lines of code:
<p:dialog id="dlg" widgetVar="dlg" modal="true">
<h:form id="dlgForm">
<p:inputText id="reason" required="true" value="#{bean.reason}"/>
<p:message for="reason"/>
<p:commandButton id="proceed" value="Proceed" update="dlgForm" action="#{bean.action}"/>
<p:commandButton id="cancel" value="Cancel" resetValues="true" onclick="PF('dlg').hide()">
<p:ajax update="dlgForm" resetValues="true"/>
</p:commandButton>
</h:form>
</p:dialog>
And the bean:
#ManagedBean(name = "bean")
#SessionScoped
class Bean {
public String processGrundFuerExportDlg() {
PrimeFaces.current().executeScript("PF('dlg').hide()");
return "other_page";
}
}
My requirements:
Dialog opens with the empty 'reason'-inputText.
If 'cancel' is pressed: dialog should close
If 'proceed' is pressed:
If reason is not empty: close dialog and navigate to the 'other_page'
If return is empty: show the error message and don't close the dialog
My problem with this code: the line
PrimeFaces.current().executeScript("PF('dlg').hide()");
seems to be executed AFTER the current page being left resulting in 'dlg' not being found (JavaScript error).
The not properly closed dialog produces a nasty side effect: After returning to my first page later on, the dialog overlay stays active and inputText elements can't be activated with the mouse (TAB works). Overlay logic in the event loop blocks mouse clicks to from being passed to the components on the page.
My question:
How this standard scenario should be properly implemented with JSF and PrimeFaces?
If Upgrade to other versions is required, are there some workaround for removing stale overlays without upgrading?
Disclaimer: I studied many related questions on StackOverflow and tried all proposed solutions without success. For example this one: Keep p:dialog open when a validation error occurs after submit
You won't be having this problem if you would redirect to the new page instead of triggering an Ajax update.
You can simply add ?faces-redirect=true to your returned string, so:
return "other_page?faces-redirect=true";
Or, if you are using faces-config, add <redirect/> to the <navigation-case>.
Then you can remove the script from your bean where you try to close the dialog.
See also:
How to navigate in JSF? How to make URL reflect current page (and not previous one)
If 'proceed' is pressed:
If reason is not empty: close dialog and navigate to the 'other_page'
If return is empty: show the error message and don't close the dialog.
All this above is handled with required true on reason inputText. If reason is empty action in proceed commandButton won't start.
You don' need to close your dialog before you are navigating to other page.

Update JSF messages after initial rendering via p:menuitem

Does anyone know if it's possible to update a JSF message or messages element AFTER its initial rendering via PrimeFaces' p:menuitem?
For example, I have a PrimeFaces p:menuitem I am using to open a p:dialog, and that p:dialog has a p:messages element whose message I would like to update and show the moment that the p:dialog is opened - I can't know whether there is a message I want to show or what that message should be until after the p:menuitem's action method is complete.
Unfortunately, setting the update attribute of the p:menuitem to both the id of the p:dialog and the id of the p:messages element itself does not cause the p:messages element to show its message, even though I think it should since the action method of the p:menuitem looks like it is properly adding a message to the p:messages element.
The menuitem opening the dialog:
<p:menuitem value="Show Dialog with Message" action="#{myView.prepareDialogWithMessage()}" oncomplete="PF('dialogWidget').show()" update="dialogWithMessage message" />
The dialog with the message:
<p:dialog id="dialogWithMessage" widgetVar="dialogWidget" resizable="false" dynamic="true" closable="false" showEffect="fade" hideEffect="fade">
<p:messages id="message" for="message" showDetail="true" escape="false" autoUpdate="true"/>
<div class="button-panel">
<p:commandButton value="Yes" styleClass="ui-confirmdialog-yes" action="#{myView.submitAction()}" oncomplete="PF('dialogWidget').hide();"/>
<p:commandButton value="No" styleClass="ui-confirmdialog-no" onclick="PF('dialogWidget').hide();"/>
</div>
</p:dialog>
The Java code which adds the message:
public void prepareDialogWithMessage() {
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_WARN, "Summary of message we want to show when the dialog opens", "Details of the message we want to show when the dialog opens");
FacesContext.getCurrentInstance().addMessage("message", message);
}
Short answer: It behaves exactly as expected and implemented.
Longer answer:
Having a closer look after your edited question, I noticed the dynamic="true" on the dialog. If you read the PrimeFaces docs it states (as you already found out):
dynamic: Enables lazy loading of the content with ajax.
So when you show the dialog via javascript, its content is updated... Since this content also includes the p:messages, that is also updated. In your case updated again with the messages that are generated in the ajax call of the update of the dialog... Most likely none... So the messages you added to it in the prepareDialogWithMessage() call of the menuItem are lost.
Since you already update the dialog in the call to the menuItem, the dynamic='true' is totally superfluous and it throws a spanner in the works.
<off-topic>A suggestion is to always start creating an [mcve]. Removing more and more until the behaviour of certain parts is as expected. Removing the dynamic='true' in one of the steps would have resulted in this and you'd have known a lot more. At the same time, also try debugging more. Investigating by looking at the requests and responses in the browser developer tool. You would have seen the messages getting added to the dialog and then the dialog(contents) being totally overridden. All these things are easy too (sorry, easy instead of 'not to difficult), can/will tell you a lot and helps getting to the cause of things quicker. Either directly, or by being able to ask way more specific question that is often easier to answer</off-topic>

p:outputLabel would not update

I have a dialog box containing p:inputText with required="true" and a corresponding p:outputLabel.
<p:outputLabel for="name" value="First Name" />
<p:inputText id="name" value="#{userManagedBean.name}" required="true"/>
I submit the dialog box without any value causing a validation error indicated by the p:outputLabel in red required mark. But on reopening the dialog without submitting, the outputLabel is still in the invalidate state(red font). It doesnt get updated until I submit or navigate back from other page. I tried to update the whole dialog box but it wouldnt affect the label.
Thanks in advance
This is expected behaviour as input components (and related components) will maintain their state after validation fails. The state is only changed after the full request is re-executed and the complete JSF lifecycle is executed again.
You're not stating exactly how you're "updating" the panel, but I can recommend <p:resetInput/> to explicitly reset the state of related input components, without having to resubmit the entire <h:form/>. If you'd posted more meaningful code, I might have been able to give a working snippet
It will not be updated since opening the dialog box is happening in javascript (client side).
You need to re-render your dialog box when you open it.

JSF listener triggers buttons onclick

<h:form>
<h:selectOneMenu value="#{productBean.productName}">
<f:selectItem itemValue="" itemLabel="..." />
<f:selectItems value="#{productBean.pizza}" var="pizza" itemValue="#{pizza.name}" itemLabel="#{pizza.name}" />
<f:ajax listener="#{productBean.valueChanged(productBean.productName)}" render="pizzaResult pizzaButton" />
</h:selectOneMenu>
<h:commandButton value ="Dodaj do zamówienia" disabled="#{productBean.isDisabled}" id="pizzaButton" onclick="#{productBean.order}"/>
<h:outputText id="pizzaResult" value="#{productBean.message}" />
</h:form>
This is my JSF form. I used valueChanged listener to make button diabled in ome cases and it works good. But I don't get why it triggers also the buttons onclick. How to do something which enable me to use button ONLY after clicking it?
I noticed that when I delete the disabled option it works good:/ But why I cannot trigger the action when button is enabled in the moment?
onclick is a client side attribute so you shouldn't try to bind it to managed bean method calls and it looks as though you did onclick=#{productBean.order} (apart from the missing quotes). This may be the cause of your problems.
OK i did that. The problem is that the button may appear as enabled (disabled="false") but its client side change and server don't know about it and application thinks that the button is still disabled. Even it looks like enabled button it won't work with action="#{something}".
You have to let server know about the change. THe only thing i did is adding the #ViewScoped to the managed bean. Now the action of disabling and enabling the button is also being seen by the server and works perfectly.
However i have a question. Client side verifaction is a bad idea. Disabled button is the only thing which prevent user from sending empty itemValue or product(in my case) which is unavailable (is_available = 0 in DB). The question is: Is it enough to ensure that it will be safe?
edit: Unfortunately after clicking the button the buttons appear enabled even though the oneSelectMenu is turned to the first, empty value. After changing the list it works again as previously, and after clicking again the situation takes time again.

How to show a personalized error/warning/info message in a popup window?

Hi I want to show a popup message about errors or warnings in my app, for example if a user try to enter a registry that is already in the data base. I'm working with JSF and my app doesn't add a registry that is already in the data base but I need to show a message that informs the user about that.
Thanks.
This answer is specifically for icefaces (since I read in comments that the #Mel is working with icefaces.
To open a popup in icefaces:
<ace:dialog widgetWar="mydialog">
<h:outputText value="This is a dialog" />
</ace:dialog>
Then call this popup in your xhtml code like this:
E.g. I am using a command link that when clicked opens the popup.
<h:commandLink onlick="mydialog.show()" action="#{myBean.doSomething()}" />
To show messages in dialog:
<h:form id="myform">
<ace:dialog id="mydialog" widgetWar="mydialog">
<h:panelGrid columns="1" width="100%">
<ace:messages id="allMsgsAdd" initEffect="highlight" for="myform:mydialog" />
</h:panelGrid>
<h:outputText value="This is a dialog" />
</ace:dialog>
</h:form>
Then you can use this code to push messages to the ace:message you just created.
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(SEVERITY_INFO, "My Message", null));
Please note that SEVERITY_INFO is a FacesMessage defined constant. You will need to import it. Depending on whether you need to show warning or error to user, you can import these
import static javax.faces.application.FacesMessage.SEVERITY_ERROR;
import static javax.faces.application.FacesMessage.SEVERITY_INFO;
Also note the first parameter of addMessage() method. You will notice that I am passing null as the first paramter. See here, and you will find that the first paramter is the client id, which basically means that which client do you want to send this message to. If clientId is null, this FacesMessage is assumed to not be associated with any specific component instance. So all of the message dialogs in your page will receive this error/warning. If you wish to ONLY show the message on the dialog, you need to pass your dialog client id here like this:
FacesContext.getCurrentInstance().addMessage("myform:mydialog", new FacesMessage(SEVERITY_INFO, "My Message", null));
You can try to use some existing open source JSF component library .Many of them already provide the pop-up UI . For example ,Richfaces provides it by . You can refer to this official link to see how to use : http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/rich_modalPanel.html
Check my asnwer in another question, maybe it will be useful for you
How do I get a richfaces modal window to display without an onclick event?
This will show your exception messages (or another message added by you in middle of the code) in a <rich:modalPanel>.

Resources