[SOLVED] IE 8 not picking up h:head on page fragment update

mosgjig · 05 Jan 2011, 19:41

I have two forms
Left Pane which is housed in a layout panel and contains navigational menu:

<h:form id="leftPane" prependId="false">
        <h:head/>
        <ui:include src="#{navBean.leftPaneUrl}"/>
        <p:remoteCommand name="updateCenter" process="@none" update="centerPane" global="true" />
    </h:form>

Sample menu item from #{navBean.leftPaneUrl}:

Code: Select all

<p:menuitem value="#{msgsFields.label_menuAdmin_jobStatus}" actionListener="#{navBean.handleLeftNavigation}"
                            immediate="true" oncomplete="updateCenter()" update="@none">
                    <f:param name="centerPaneUrl" value="administration/list-jobStatus"/>
                </p:menuitem>

The other form is in the center pane:

Code: Select all

    <h:form id="centerPane" prependId="false">
        <h:head/>
        <ui:include src="#{navBean.centerPaneUrl}"/>
        <p:remoteCommand name="updateCenter" process="@none" update="centerPane" global="true"/>
    </h:form>

whenever a left pane menu item switches the contents of centerPaneUrl, the corresponding component resources are not loaded, instead the previous centerPaneUrl component resources are still present. (i.e. On first load, centerPaneUrl points to a composition with fields sets. An update to centerPaneUrl pointing to a compoistion with datatable and no fieldsets, the page does not invoke <h:head/> properly to reload primefaces css components). A refresh picks up the new component resources, but the same problem persists when we navigate back to the other centerPaneUrl with different pf components

The base-layout template:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">

    <f:view locale="#{appLocale.locale}" contentType="text/html">
        <h:head>
            <link rel="stylesheet" href="${request.contextPath}/resources/css/theme/jquery.ui.theme.css" type="text/css" media="screen, projection" target="head"/>
            <ui:insert name="headIncludes"/>
        </h:head>
        <h:body>
            <p:layout fullPage="true">
                <p:layoutUnit position="top" height="110">
                    <ui:insert name="top"/>
                    <ui:insert name="menu"/>
                </p:layoutUnit>

                <p:layoutUnit position="left" width="200">
                    <ui:insert name="left"/>
                </p:layoutUnit>

                <p:layoutUnit position="center" scrollable="true">
                    <ui:insert name="center"/>
                </p:layoutUnit>
            </p:layout>
        </h:body>
        <link rel="stylesheet" href="${request.contextPath}/resources/css/mycompany/my.css" type="text/css" media="screen, projection" target="head"/>
    </f:view>
</html>

The current code works properly in Chrome, but not in IE8.

Any pointers?

Thanks

bumble.bee · 05 Jan 2011, 20:11

You should only have one head element per page.

mosgjig · 05 Jan 2011, 23:07

Any best pracitce you can recomend? I tried several configurations on how and where a single h:head is placed and updated, but nothing seems to work.

bumble.bee · 06 Jan 2011, 15:38

Use a Facelets template and don't update the h:head directly. If you need to update a stylesheet give the link element an ID and update only it. A basic template would look like this:

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:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <f:view contentType="text/html" encoding="UTF-8">
        <h:head>
            <link type="text/css" rel="stylesheet" media="screen" href="#{request.contextPath}/resources/themes/#{userPreferencesBean.theme}/skin.css" id="dynamicStyle"/>
            <title><ui:insert name="title">My Default Title (can  be overridden by template client)</ui:insert></title>
        </h:head>
        <h:body>
            <p:ajaxStatus id="ajaxStatus">
                <f:facet name="start">
                    <h:graphicImage name="ajaxloader.gif" library="images"/>
                </f:facet>
                <f:facet name="complete">
                    <h:outputText value=""/>
                </f:facet>
            </p:ajaxStatus>
            <p:growl id="growl" showSummary="true" showDetail="false"/>
            <div id="top">
                <ui:insert name="top">
                    <ui:include src="top.xhtml"/>
                </ui:insert>
            </div>
            <div id="content">
                <ui:insert name="content"></ui:insert>
            </div>
            <div id="bottom">
                <ui:insert name="bottom">
                    <ui:include src="bottom.xhtml"/>
                </ui:insert>
            </div>
        </h:body>
    </f:view>
</html>

mosgjig · 07 Jan 2011, 06:50

Bumble.bee,

I greatly appreciate your input, but your solution doesn't remedy the situation because the head element doesn't seem to be the root cause of the issue. After mucking around I've noticed that the primeface resources are being retrieved however IE8 doesn't acknowledge them. The resources are localized within the form, i guess through the <h:head/> tags, but IE8 will not register them.

i created a small sample project just to play around with this issue and here is what it produced when the form is updated

Code: Select all

<FORM id=centerPane encType=application/x-www-form-urlencoded method=post name=centerPane action=/ieTest/app-workbench.jsf>
<INPUT value=centerPane type=hidden name=centerPane>
<LINK rel=stylesheet type=text/css href="/ieTest/javax.faces.resource/yui/resize/assets/skins/sam/resize.css.jsf?ln=primefaces&v=2.2.RC2">
<LINK rel=stylesheet type=text/css href="/ieTest/javax.faces.resource/layout/layout.css.jsf?ln=primefaces&v=2.2.RC2">
<LINK rel=stylesheet type=text/css href="/ieTest/javax.faces.resource/menu/menu.css.jsf?ln=primefaces&v=2.2.RC2">
<LINK rel=stylesheet type=text/css href="/ieTest/javax.faces.resource/growl/assets/growl.css.jsf?ln=primefaces&v=2.2.RC2">
<LINK rel=stylesheet type=text/css href="/ieTest/javax.faces.resource/paginator/paginator.css.jsf?ln=primefaces&v=2.2.RC2">
<LINK rel=stylesheet type=text/css href="/ieTest/javax.faces.resource/datatable/datatable.css.jsf?ln=primefaces&v=2.2.RC2">
<SPAN id=msgs></SPAN>
<DIV id=jobStatusTable class="ui-datatable ui-widget">
<DIV class="ui-datatable-header ui-widget-header ui-corner-tl ui-corner-tr">sample header facet</DIV>
<DIV id=jobStatusTable_paginatortop class="ui-paginator ui-paginator-top ui-widget-header"><SPAN id=yui-pg0-0-first-span class="ui-paginator-first ui-state-default ui-corner-all ui-state-disabled"><SPAN class="ui-icon ui-icon-seek-first">First</SPAN></SPAN> <SPAN id=yui-pg0-0-prev-span class="ui-paginator-previous ui-state-default ui-corner-all ui-state-disabled"><SPAN class="ui-icon ui-icon-seek-prev">Prev</SPAN></SPAN><SPAN id=yui-pg0-0-pages class=ui-paginator-pages></SPAN><SPAN id=yui-pg0-0-next-span class="ui-paginator-next ui-state-default ui-corner-all ui-state-disabled"><SPAN class="ui-icon ui-icon-seek-next">Next</SPAN></SPAN><SPAN id=yui-pg0-0-last-span class="ui-paginator-last ui-state-default ui-corner-all ui-state-disabled"><SPAN class="ui-icon ui-icon-seek-end">Last</SPAN></SPAN></DIV>
<TABLE>
<THEAD>
.
.
.

none of th ui-datable or ui-paginator css classes show up on the css inspector within the ie developer tools.

chrome and firefox produce the same text however they do pick up the resources and apply the css.

Any clues, hacks??

bumble.bee · 07 Jan 2011, 15:22

What are you updating? An entire form which contains a p:layout? Try updating smaller parts of the page.

mosgjig · 07 Jan 2011, 15:59

I am updating my center pane which is a form

Code: Select all

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui">

    <h:form id="centerPane" prependId="false">
        <h:head/>
        <ui:include src="#{navBean.centerPaneUrl}"/>
        <p:remoteCommand name="updateCenter" process="@none" update="centerPane" />
    </h:form>
</ui:composition>

where the <ui:include src="#{navBean.centerPaneUrl}"/> has different content depending on menu selection. Currently, the possible contents of centerPaneUrl can be categorized into two groups, Data Tables or Field Sets. The page with field sets gets loaded first, then switching into a page with Data Tables, the resources arent applied and everything looks wack... a refresh of the page resolves the issue, but going back to the page with fields sets we see the same issue ( catch 22)

mosgjig · 07 Jan 2011, 23:04

Ugh! After so much time spent on this thing it turns out to be a non issue. JSF Project Stage of 'Development' and IE 8 don't dance well together. I set my project stage to production and the app is faster and IE behaves properly now. It still breaks on initial load, but browsing between center contents has been fixed.

Thanks for your help bumble.bee!

[SOLVED] IE 8 not picking up h:head on page fragment update

Who is online