CODEWITHSUNDEEP
primefacesjsf-2
Kawu
Kawu

Reputation: 14003

PrimeFaces exception handler and dialogs overlaying

I extended the PF ViewExpiredException handling example at the showcase a little... see

https://www.primefaces.org/showcase/ui/misc/exceptionHandler.xhtml

I have a simple button that does an AJAX request and then shows a PF dialog via oncomplete. The action gets executed, throws an exception, shows the "Session Expired dialog", but the button just clicked wants to display a dialog as well.

What you get is that the exception dialog is UNDER the dialog doing the real work.

enter image description here

faces-config.xml:

<?xml version='1.0' encoding='UTF-8'?>
<faces-config version="2.2"
              xmlns="http://xmlns.jcp.org/xml/ns/javaee"
              xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
              xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd">
    <application>

        <action-listener>org.primefaces.application.DialogActionListener</action-listener>
        <navigation-handler>org.primefaces.application.DialogNavigationHandler</navigation-handler>
        <view-handler>org.primefaces.application.DialogViewHandler</view-handler>

        <el-resolver>org.primefaces.application.exceptionhandler.PrimeExceptionHandlerELResolver</el-resolver>

    </application>

    <factory>
        <exception-handler-factory>org.primefaces.application.exceptionhandler.PrimeExceptionHandlerFactory</exception-handler-factory>        
    </factory>

</faces-config>

XHTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html">

    <f:view encoding="UTF-8">

        <h:head>
            <title>PrimeFaces Exception Handler Reload Test</title>
        </h:head>

        <h:body>

            <p:ajaxExceptionHandler type="javax.faces.application.ViewExpiredException"
                                   pdate="exception-handler-dialog-form"
                                    onexception="PF('exceptionHandlerDialog').show();" />

            <h:form id="test-form">

                <p:commandButton value="Throw ViewExpiredException on dialog show!"
                                 action="#{exceptionHandlerView.throwViewExpiredException}"
                                 oncomplete="PF('someDialog').show();" />

            </h:form>

            <h:form id="some-dialog-form">

                <p:dialog id="some-dialog"
                          widgetVar="someDialog"
                          header="Something to Do"
                          modal="true"
                          resizable="false"
                          closable="true"
                          closeOnEscape="true"
                          styleClass="text-center"
                          style="width: 300px !important; height: 200px !important;">

                    SEARCH DIALOG...

                </p:dialog>

            </h:form>

            <h:form id="exception-handler-dialog-form">

                <p:dialog id="exception-handler-dialog"
                          widgetVar="exceptionHandlerDialog"
                          header="Session Expired"
                          modal="true"
                          resizable="false"
                          closable="true"
                          closeOnEscape="true"
                          style="width: 300px !important; height: 200px !important; text-align: center;">

                    <p:ajax event="close"
                            process="@this"
                            update="#{updateIds}"
                            onstart="PF('reloadPageButton').jq.click();"
                            immediate="true" />

                    <h:outputText value="Your session has expired." />

                    <p:button widgetVar="reloadPageButton"
                              value="Reload page"
                              outcome="#{view.viewId}?includeViewParams=true" />

                </p:dialog>

            </h:form>

        </h:body>

    </f:view>

</html>

Bean:

@Named
@ViewScoped
public class ExceptionHandlerView implements Serializable
{
    private static final long serialVersionUID = 1L;

    public void throwViewExpiredException()
    {
        throw new ViewExpiredException( "A ViewExpiredException!", FacesContext.getCurrentInstance().getViewRoot().getViewId() );
    }

    public void throwNullPointerException()
    {
        throw new NullPointerException( "A NullPointerException!" );
    }

    public void throwWrappedIllegalStateException()
    {
        throw new FacesException( new IllegalStateException( "A wrapped IllegalStateException!" ) );
    }
}

QUESTION:

How do you make the exception dialog appear after/on top of the real dialog?

Upvotes: 1

Views: 700

Answers (1)

Kukeltje
Kukeltje

Reputation: 12337

I'd start by analyzing the resulting client-side html (there is where the displaying takes place) and the corresponding html and start experimenting with CSS. And since I do have some time, I changed this comment to an answer and started trying myself.

In the client-side htm, I noticed the exception dialog has lower z-index than the normal dialog and since both are modal, and the 'shim' has a z-index 1 lower than the dialog. So I experimented with:

  • Setting the z-index of the exception dialog explicitly inline (in its style attribute): did not work, seems some 'magic is applied which might be corrected but was beyond my scope here
  • Changing the order of the dialogs in the xhtml file (did not work, maybe due to some magic too)
  • Adding appendTo="@(body)" to the exception dialog: Did not work, the other dialog is also a direct child of the body and the z-index still lower

  • Set the z-index of the exception dialog via included css (not inline) 

    <style>
#exception-handler-dialog-form\:exception-handler-dialog {
   z-index: 1005 !important;
}
</style>

This did the trick (you can change the selector to what fits your case)

Upvotes: 3

Related Questions