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>
Related
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.
I have a small form inside my p:dialog:
<p:dialog id="commentDialog" header="#{managedBean.dialogHeader}" widgetVar="commentDialog" modal="true" resizable="true" height="auto">
<h:form>
<h:outputLabel for="comment" value="Comment:"/>
<p:inputTextarea id="comment" title="Comment"
rows="6" cols="33"
value="#{managedBean.comment}"
required="true"/>
<h:commandButton value="Submit" action="#{managedBean.dialogFormSubmit}"/>
</h:form>
</p:dialog>
Can you tell why, when I hit the Submit button, the dialog does get closed but the dialogFormSubmit() in the managed bean does not get invoked?
I also tried changing to p:commandButton thinking the functionality required the PrimeFaces variant of the h:commandButton but got the same.
The question is similar to this and I tried to do the same but couldn't make it work and also this one which doesn't really seem to have a workable answer.
UPDATE:
The dialog was being shown from the managed bean but was also updated (the solution for which I got here) prior to showing by using the RequestContext API in order to refresh the header:
RequestContext context = RequestContext.getCurrentInstance();
context.update("commentDialog");
context.execute("PF('commentDialog').show();");
I have come to realize that this malfunction occurs only when I update the dialog (middle line above). When I actually don't (which is not critical for the dialog functionality but the header appears blank), the submit action works fine. So the context update seems to be what's messing it up and I don't know how to get both the update while retaining the submit functionality. Could it be a bug in RequestContext.update()?
I currently have a giant ui:repeat. Within this ui:repeat, some of the repeated objects have a url to a popup image associated with them. When someone clicks display under that particular object, I need the url to popup in a p:dialog.
<ui:repeat var="thing" value="#{bean.thingList}">
<p:commandLink value="details" onclick="miniImage.show();"
update=":#{p:component('chart')}"
action="#{bean.setCurrentImg(thing.imageUrl)}"
rendered="#{thing.includeImage}">
</p:commandLink>
</ui:repeat>
and at the bottom of the page:
<p:dialog id="chart" widgetVar="miniImage" >
<h:graphicImage value="#{bean.currentImg}"/>
</p:dialog>
And in the backing bean I tried using a simple setter and getter for currentImg.
I am a bit confused on this now and would like to accomplish this without having to submit the entire form as well. Any help is greatly appreciated.
If you're using PrimeFaces 3.3 or newer, you could just add partialSubmit="true" to the command component. You can then control the to-be-processed components in process attribute. In this particular case, just the current component (the command component itself) is sufficient, thus so process="#this":
<p:commandLink ... process="#this" partialSubmit="true" />
This way only the request parameters which are really necessary for the process will be sent.
Unrelated to the concrete problem, I suggest to use oncomplete instead of onclick to open the dialog. Otherwise the dialog is opened before update takes place and may cause poor user experience as the enduser would see the image instantly changing.
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>.
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.