growl is not displayed on the second mobile page

Question

On a single xhtml, I have two pages (p:page). Each page has a form and in each form, there is a growl defined. When I am on the first page, the growl is displayed upon clicking the button. However, when I am on the second page, the growl is not displayed. Below is the reproducible sample code.

The reason, why I did not use the update="@form", is that there is another form in an overlay panel and via @(.errorHandlingPanel) selector, I should be able to easily trigger the growl without knowing which page currently I'm on.

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

<f:view renderKitId="PRIMEFACES_MOBILE"/>

<h:head>
</h:head>

<h:body>
    <pm:page id="first">
        <pm:header title="Page 1"></pm:header>
        <pm:content>
            <h:form id="form1">

                <ui:include src="error_handling.jspx"/>

                <p:commandButton id="btn1" value="Save" actionListener="#{growlViewDev.saveMessage}"
                                 update="@(.errorHandlingPanel)"
                                 icon="check"/>
            </h:form>
        </pm:content>
        <pm:footer>
             <p:tabMenu>
                 <p:menuitem value="Page 1"
                        outcome="pm:first?transition=slide"/>
                 <p:menuitem value="Page 2"
                        outcome="pm:second?transition=slide"/>
            </p:tabMenu>
         </pm:footer>
    </pm:page>

    <pm:page id="second">
        <pm:header title="Page 2"></pm:header>
        <pm:content>
            <h:form id="form2">
                <ui:include src="error_handling.jspx"/>

                <p:commandButton id="btn2" value="Save" actionListener="#{growlViewDev.saveMessage2}"
                                 update="@(.errorHandlingPanel)"
                                 icon="check"/>
            </h:form>
        </pm:content>
        <pm:footer>
             <p:tabMenu>
                 <p:menuitem value="Page 1"
                        outcome="pm:first?transition=slide"/>
                 <p:menuitem value="Page 2"
                        outcome="pm:second?transition=slide"/>
            </p:tabMenu>
         </pm:footer>
    </pm:page>
</h:body>
</html>

-- error_handling.jspx

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
        >
  <ui:composition>
      <p:outputPanel styleClass="errorHandlingPanel">
          <p:growl showDetail="true" showSummary="true" escape="false" sticky="true" globalOnly="true"/>
      </p:outputPanel>
  </ui:composition>
</html>

-- managed bean

 @ManagedBean
 public class GrowlViewDev {

    public void saveMessage() {
      FacesContext context = FacesContext.getCurrentInstance();

      context.addMessage(null, new FacesMessage("Successful",  "Your message: Button 1") );
      context.addMessage(null, new FacesMessage("Second Message", "Additional Message Detail"));
    }

    public void saveMessage2() {
        FacesContext context = FacesContext.getCurrentInstance();

        context.addMessage(null, new FacesMessage("Successful",  "Your message: Button 2") );
        context.addMessage(null, new FacesMessage("Second Message", "Additional Message Detail"));
    }
}

Tested with 5.1, 5.2 and 5.3

Thanks, ilhami visne

djmj · Answer 1 · 2018-12-02T23:16:29.297

Somehow it seems the show method is not invoked after page navigation. The only workaround i found out is manually showing the message in ajax component oncomplete attribute using following method:

<p:growl id="growl" widgetVar="growlWidgetVar"/>

<p:commandButton outcome="pm:otherPage" update=":growl" oncomplete="showGrowl('growlWidgetVar');"/>

/* 
 * show current growl message again - PF-mobile bug on page navigation not showing it 
 * 
 * @param widgetVar PF widgetVar
 */
function showGrowl(widgetVar)
{
    PF(widgetVar).show(PF(widgetVar).cfg.msgs);
}

The navigation often takes even place if a growl shall be shown. For this case call it in the pageshow handler instead:

$(document).on('pageshow', '#myPage', function(){
    showGrowl('growlWidgetVar');
});

growl is not displayed on the second mobile page

1 Answers1