p:menuitem navigation is not working in internet explorer

smithh032772 · 04 Mar 2014, 15:59

clement wrote:P.S. : How can i close the post?

just post your 'final' code (changes), here. I'm interested in this EDGE code that you and Andy discussed/mentioned.

clement · 04 Mar 2014, 17:38

this is my code,

there is no difference with css but in terms of functionality i need to refresh the page manually for the appearance the nested layout.

I click on the p: menuItem, it aims navigate the center remains empty, i refresh with F5 and the nested layout Appears in the center ...
May be i forget anything... But i can't see what.

index.xhtml

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <f:view contentType="text/html">
        <h:head>
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
            <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
            <link rel="SHORTCUT ICON" href="images/2014.ico"/>
            <title>Front Office</title>
        </h:head>

       <h:body>
        <pe:layout fullPage="true">
            <pe:layoutPane position="north" size="100" resizable="false" closable="false">
                <ui:include src="./header.xhtml"></ui:include>
            </pe:layoutPane>
            <pe:layoutPane position="south" size="100">
                Footer
            </pe:layoutPane>
            <pe:layoutPane position="west" size="200">
                <h:form>
                    <p:menu>
                        <p:submenu label="Resources">
                            <p:menuitem value="Support Center sample" action="#{layoutBean.setPage('nestedLayout.xhtml')}" update=":luc"/>
                        </p:submenu>
                    </p:menu>
                </h:form>
            </pe:layoutPane>
            <pe:layoutPane position="center">
                <h:panelGroup id="luc" layout="block" styleClass="ui-layout-content">
                    <ui:include src="#{layoutBean.page}" />
                </h:panelGroup>
            </pe:layoutPane>
        </pe:layout>
    </h:body>
  </f:view>
</html>

nestedLayout.xhtml

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions">
    <f:view contentType="text/html">
        <pe:layoutPane id="incPELPN" position="north" size="100" closable="true" styleContent="background-color: burlywood;">
            <f:facet name="header">  
                <h:outputText value="Center-North"/>  
            </f:facet>  
            <h:outputText value="Middle top unit content." />
        </pe:layoutPane>
        <pe:layoutPane id="incPELPS" position="south" size="100" styleContent="background-color: burlywood;">
            <h:outputText value="Middle south unit content." />
        </pe:layoutPane>
        <pe:layoutPane id="incPELPW" position="west" size="200" styleContent="background-color: sandybrown;">
            <h:outputText value="Middle left unit content." />
        </pe:layoutPane>
        <pe:layoutPane id="incPELPE" position="east" size="200" styleContent="background-color: sandybrown;">
            <h:outputText value="Middle right unit content." />
        </pe:layoutPane>
        <pe:layoutPane id="incPELPC" position="center" styleContent="background-color: sandybrown;">
            <h:outputText value="Middle center unit content." />
        </pe:layoutPane>
    </f:view>
</html>

smithh032772 · 04 Mar 2014, 18:15

clement wrote:there is no difference with css but in terms of functionality i need to refresh the page manually for the appearance the nested layout.

I click on the p: menuItem, it aims navigate the center remains empty, i refresh with F5 and the nested layout Appears in the center ...

hmmm, i thought you solved your issue, but it seems as though you 'need' to refresh the page via F5, and then the page looks good in your browser.

maybe i am misunderstanding something here. if you 'need' to do F5/refresh, then I recommend that you add ajax=false to your menuitem.

please explain/clarify this need to F5 key to refresh the page 'before' page meets your expectations.

clement · 04 Mar 2014, 18:23

ok, so when i click on menuItem the include is refreshing but still blank, then i refresh the page (F5) the include appears correctly with content.

If i put attribut ajax=false on menuItem it works but all the page is refreshing and i don't want that.

I hope you understand better my problem.

smithh032772 · 04 Mar 2014, 18:37

earlier, you said this below,

clement wrote:Thanks you Andy for your response, i found "EDGE" like you said and it works.

and you mentioned this below,

clement wrote:P.S. : How can i close the post?

everything above leads me to believe that you no longer have an issue, but below, you said,

clement wrote:ok, so when i click on menuItem the include is refreshing but still blank, then i refresh the page (F5) the include appears correctly with content.

If i put attribut ajax=false on menuItem it works but all the page is refreshing and i don't want that.

so, it seems as though menuitem with 'edge' ie9 compatibility is not updating your ui:include via ajax=true (default).

clement · 04 Mar 2014, 18:43

yes, sorry it's a mistake i thought it works but i found out this problem.

it's over all the browsers that i need to refresh the entire page with ajax=true on menuItem, but only if the include contains pe:layout or p:layout.

smithh032772 · 04 Mar 2014, 20:09

click URLs below, and read question and answer, and let me know if this shows you that there is something that you need to modify with your xhtml or java bean code.

How to include another XHTML in XHTML using JSF 2.0 Facelets?

JSF: ui:include and the (broken) view scope

JSF 2 AJAX - reload whole div (e.g. <ui:include src="toReloadData.xhtml" />)

How to ajax-refresh the main content part by navigation menu?

Code: Select all

<p:menuitem value="SCS p:cl" actionListener="#{layoutBean.setPage('supportCenterSample/main')}" update=":luc"/>

reply with the layoutBean.setPage() source code, and reply with the entire (supportCenterSample/main) xhtml page source code.

clement · 05 Mar 2014, 11:16

Hi Howard and thanks to take time to help me.

I read these 4 URL that you gave to me and test the answers. The result was the same <ui:include/> stay blank until i refresh with F5 key.

I modify my include page to use <ui:composition/> tag that is more clean.

here is my LayoutBean.java:

Code: Select all

package com.test.primefaces;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@SessionScoped
@ManagedBean(name = "layoutBean")
public class LayoutBean implements Serializable {

    private String page;

    public LayoutBean() {
        this.page = "front.xhtml";
    }

    public String getPage() {
        return this.page;
    }

    public void setPage(String page) {
        this.page = page;
    }
}

supportCenterSample/main.xhtml:

Code: Select all

<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:pe="http://primefaces.org/ui/extensions">
    <pe:layoutPane id="incPELPN" position="north" size="100" closable="true">
        <f:facet name="header">  
            <h:outputText value="Center-North"/>  
        </f:facet>  
        <h:outputText value="Middle top unit content." />
    </pe:layoutPane>
    <pe:layoutPane id="incPELPS" position="south" size="100">
        <h:outputText value="Middle south unit content." />
    </pe:layoutPane>
    <pe:layoutPane id="incPELPW" position="west" size="200">
        <h:outputText value="Middle left unit content." />
    </pe:layoutPane>
    <pe:layoutPane id="incPELPE" position="east" size="200">
        <h:outputText value="Middle right unit content." />
    </pe:layoutPane>
    <pe:layoutPane id="incPELPC" position="center">
        <h:outputText value="Middle center unit content." />
    </pe:layoutPane>
</ui:composition>

When i search for my problem on primefaces forum or on the web, the workarounds does not work for me... this is disturbing.

kukeltje · 05 Mar 2014, 11:23

please, new issues (albeit related) in new topics please. The subject does not cover the issue anymore

smithh032772 · 05 Mar 2014, 11:30

clement,

see this BalusC answer on stackoverflow.com,

JSF dynamic include using Ajax request

I wanted to say this earlier, you 'need' to 'hardcode' your ui:include src="someFile.xhtml" like in BalusC's answer (URL above),

'and'

you need to dynamically 'render' h:panelGroup id="someID" via your menuitem (when ajax=true).

to do more reading, just search google for

jsf ui:include ajax

and read as much of those listed in the search results.

you can even search google for

jsf ui:include build

and i'm sure you will learn even more by reading those search results.

p:menuitem navigation is not working in internet explorer

Who is online