Forums

angle-left Back

Liferay Faces displays hidden fragments of primefaces comp. on navigation

SS
Stefan Schuhbaeck, modified 10 Months ago.

Liferay Faces displays hidden fragments of primefaces comp. on navigation

New Member Posts: 3 Join Date: 8/29/17 Recent Posts
Hi,

I use Liferay 7.0.3-ga4 with Liferay-Faces (JSF2.2) and PrimeFaces. When a portlet on a page contains a primeface Element such as <p:selectOneMenu> and I navigate to a different page, which does not contain any primeface elements, using the Navigationmenu Portlet from Liferay 7 the items of the selectMenu fragment are displayed on the top of the page (behind the menubar). This happens also with <p:notifiactionbar> and <p:tooltip>

This happens only if I navigate via the Navigationmenu Portlet first to a /web/testpage/main and then to /web/testpage/second. If I type the ULR and directly load the /web/testpage/second ist works. If I look at the Page with the Chrome Dev Tools I see that the navigation does not reload the complete website but only the page div. The <p:selectOneMenu> components append the select items to the body tag and thus they don’t get removed on navigation.

For the most primefaces elements there is an attribute to tell them where to append hidden fragments but I have a big codebase from an old Liferay 6.1 project so that would be a lot of work.

Is there a way to configure a JSF-Portlet to tell the components where to append elements?
Or, is there a way to configure the Navigationmenu Portlet in Liferay 7 to force a complete refresh of the webpage, which would also remove the problem?

For the example code to reproduce the issue I created two JSF-Faces Portelts one with Primefaces and the other without. Each portlet is on a single page with the default (Classic) Theme.

The Primeface Portelt view

    <h:body>
        <h1>First Page <h:outputText value="#{myBean.currUrl}"/>    </h1>
        <h:form>
            <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
                <p:outputLabel for="console" value="Basic:" />
                    <p:selectOneMenu id="console" value="#{myBean.console}" style="width:125px">
                        <f:selectItem itemLabel="Select One" itemValue="" />
                        <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
                        <f:selectItem itemLabel="PS4" itemValue="PS4" />
                        <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
                    </p:selectOneMenu>
            </h:panelGrid>
        </h:form>
    </h:body>


The Portlet view without Primefaces

    <h:body>
        <h1>Page 3 <h:outputText value="#{myBean.currUrl}"/></h1>
    </h:body>
Juan Gonzalez, modified 10 Months ago.

RE: Liferay Faces displays hidden fragments of primefaces comp. on navigati (Answer)

Liferay Legend Posts: 3073 Join Date: 10/28/08 Recent Posts
Hi Stefan.

This is caused by SPA, as Primefaces append elements in body by default (unless you tell them to append to current element explicitely using append="@this"). SPA, when unloading and loading next page, doesn't consider all elements (portlets are contained within a div, while non portlets are contained within <body>)., so it doesn't unload the <body> appended elements.

So, you can fix this with one of these options:
SS
Stefan Schuhbaeck, modified 10 Months ago.

RE: Liferay Faces displays hidden fragments of primefaces comp. on navigati

New Member Posts: 3 Join Date: 8/29/17 Recent Posts
Hi Juan,

thanks for the fixes. It worked.

By Disabling SPA a second problem with not completly loaded css from a custom theme also disappeared.