Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Stefan Schuhbaeck
Liferay Faces displays hidden fragments of primefaces comp. on navigation
August 29, 2017 2:23 AM
Answer

Stefan Schuhbaeck

Rank: New Member

Posts: 3

Join Date: August 29, 2017

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
 1
 2    <h:body>
 3        <h1>First Page <h:outputText value="#{myBean.currUrl}"/>    </h1>
 4        <h:form>
 5            <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
 6                <p:outputLabel for="console" value="Basic:" />
 7                    <p:selectOneMenu id="console" value="#{myBean.console}" style="width:125px">
 8                        <f:selectItem itemLabel="Select One" itemValue="" />
 9                        <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
10                        <f:selectItem itemLabel="PS4" itemValue="PS4" />
11                        <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
12                    </p:selectOneMenu>
13            </h:panelGrid>
14        </h:form>
15    </h:body>


The Portlet view without Primefaces
1
2    <h:body>
3        <h1>Page 3 <h:outputText value="#{myBean.currUrl}"/></h1>
4    </h:body>
Attachment

Attachments: primefaceElements1.png (63.5k)
Juan Gonzalez
RE: Liferay Faces displays hidden fragments of primefaces comp. on navigati
August 29, 2017 2:44 AM
Answer

Juan Gonzalez

Rank: Liferay Legend

Posts: 3055

Join Date: October 28, 2008

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:
  1. Disabling SPA
  2. Try workaround made in https://issues.liferay.com/browse/FACES-2677. In this case, the component is just hidden so it can be invisible. See changes here: FACES-2677 workaround
  3. Use append="@this" for components mentioned in FACES-2677 comment. We found a case that needed a CSS change in primefaces so a p:select component can work properly if it's located in a datatable header. Read this Primefaces issue and their related pull request for more info.
Stefan Schuhbaeck
RE: Liferay Faces displays hidden fragments of primefaces comp. on navigati
August 29, 2017 3:51 AM
Answer

Stefan Schuhbaeck

Rank: New Member

Posts: 3

Join Date: August 29, 2017

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.