2
  • 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

Mohsen Alyafei
  • 4,765
  • 3
  • 30
  • 42
Boris Brodski
  • 8,425
  • 4
  • 40
  • 55
  • Sounds like http://xyproblem.info/ – Jasper de Vries Jul 07 '20 at 09:58
  • @JasperdeVries I don't see, what my problem X should be. I just want to get a standard "form in a dialog with validation" thing working. I thought, with such mature technology, like JSF and PrimeFaces this shouldn't be a problem at all. – Boris Brodski Jul 07 '20 at 10:19
  • What about not closing the dialog and just navigate to the new page? – Jasper de Vries Jul 07 '20 at 11:05
  • @JasperdeVries I would love to, but this is exactly my problem (see the question). The dialog overlay stays open prevents mouse events from being delivered to the widgets. Read corresponding paragraph of my question. – Boris Brodski Jul 07 '20 at 12:06
  • "After returning to my first page later on" how? By using the browser's back button? Please provide a [mcve] – Jasper de Vries Jul 07 '20 at 12:20
  • No, not the back button, of course! By executing an action with `return 'first_page'`. It's very strange, but I debugged JS and found, that the mouse events are not passed to the components becouse of an active overlay. If I close the dialog with `.hide()`, no overlay problem occour. But then the validation isn't working :( [I'm working on the MWE now] – Boris Brodski Jul 07 '20 at 12:25
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/217381/discussion-between-jasper-de-vries-and-boris-brodski). – Jasper de Vries Jul 07 '20 at 12:30

2 Answers2

3

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:

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
  • `` is exactly what I have been looking for! Thank you! (`return "other_page?faces-redirect=true";` didn't work for some reason) – Boris Brodski Jul 07 '20 at 19:45
0

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.

korbn
  • 52
  • 2
  • As stated in the question, my mouse clicks stop working, if I don't close the dialog before leaving the page (technically, the page is the same but get updated my JSF with the new content) – Boris Brodski Jul 07 '20 at 10:17
  • "close dialog and navigate to the 'other_page'" how I'm supposed to do it. Could you provide any code snippets or copy/paste my code and change it? Thank you. – Boris Brodski Jul 07 '20 at 10:21
  • If your page is the same then you don't need to navigate to other page. just update elements that you need and close dialog. Can you also post way of opening your dialog. – korbn Jul 07 '20 at 11:04
  • I navigate to a different JSF-page, but technically it is the same page, but I'm not sure. If it would be completely new page, I don't know how opened dialog's overlay could mess up with the fresh opened other page. – Boris Brodski Jul 07 '20 at 12:08