Layout Needs Manual refresh. Looks like it can't load external js

问题

I'm using JSF2 with Primefaces3.4.2 I have created a layout in layoutComplex.xhtml as below:

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
            <meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
            <title>PrimeFaces - ShowCase</title>
        </f:facet>
        <h:outputScript library="js" name="jscolor.js" target="head" />
        <script type="text/javascript">  
    function handleValidateRequest(xhr, status, args) {  
        //alert("");
        //jscolor.addEvent(window, 'load', jscolor.init);
    }  
</script>
    </h:head>
    <h:body>
        <p:layout fullPage="true">
            <p:layoutUnit id="left" position="west" size="300" resizable="true"
                closable="true" collapsible="true" header="Options" minSize="200">
                <h:form>
                    <p:slideMenu style="width:235px;margin-left:-3px;margin-top:-6px;"
                        id="tree">
                        <p:submenu label="Product" icon="ui-icon-play">
                            <p:menuitem value="test color picker"
                                update=":centerContentPanel " action="#{navigationBean.doNav}"
                                oncomplete="handleValidateRequest(xhr, status, args)"
                                icon="ui-icon-arrow-4-diag">
                                <f:param name="urlParam" value="colorPicker" />
                            </p:menuitem>
                        </p:submenu>
                    </p:slideMenu>
                </h:form>
            </p:layoutUnit>
            <p:layoutUnit id="center" position="center">

                <p:panel header="Colors">
                    <h:panelGrid columns="2" cellpadding="10">
                        <h:inputText class="color">
                            <p:ajax event="change" update="osssutcolor" />
                        </h:inputText>
                        <h:outputText style="display: none" id="osssutcolor" />
                    </h:panelGrid>
                </p:panel>

                <h:form id="centerContentPanel">
                    <ui:include src="#{navigationBean.pageName}.xhtml" />
                </h:form>
            </p:layoutUnit>
        </p:layout>


    </h:body>
</f:view>
</html>

Yes,I can dynamically change the source of centerContentPanel without refreshing the whole page and just the centerContentPanel i.e for on click of menuitem present in the layoutComplex.xhtml,and then the colorPicker page's content will be displayed in the centerContenPanel. But issue is: I added a colorpicker.js in the layoutComplex.xhtml head and hope it can work when update centerContent, but actually, it's not working .. but after refresh all page by press F5 ,it works fine as I expected. Why? How can i fix this? Following is colorPicker.xhtml:

   <ui:composition 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">

        <h:outputScript library="js" name="jscolor.js" target="head" />
        <p:panel header="Colors">
            <h:panelGrid columns="2" cellpadding="10">
                <h:inputText class="color">
                    <p:ajax event="change" update="osssutcolor" />
                </h:inputText>
                <h:outputText style="display: none" id="osssutcolor" />
            </h:panelGrid>
        </p:panel>

</ui:composition>

and NavigationBean.java

package com.singtel.eshop.control;
import java.io.IOException;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@SessionScoped
@ManagedBean
public class NavigationBean {
    private String pageName = "blank";
    public NavigationBean() {
    }
    public void doNav() {
        String urlStr = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("urlParam");
        this.pageName = urlStr;
    }
    public String getPageName() {
        return pageName;
    }
    public void setPageName(String pageName) {
        this.pageName = pageName;
    }
}

回答1:

You should call the jscolor.init after ajax call too. Seems like it is being called right after page load and needs to be called after your ajax call or inside your component. You can achieve this by calling jscolor.init in your colorPicker.xhtml file like this.

<ui:composition 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">

        <h:outputScript library="js" name="jscolor.js" target="head" />
<script>
            jscolor.init;
        </script>
        <p:panel header="Colors">
            <h:panelGrid columns="2" cellpadding="10">
                <h:inputText class="color">
                    <p:ajax event="change" update="osssutcolor" />
                </h:inputText>
                <h:outputText style="display: none" id="osssutcolor" />
            </h:panelGrid>
        </p:panel>

</ui:composition>

来源：https://stackoverflow.com/questions/14228632/layout-needs-manual-refresh-looks-like-it-cant-load-external-js

标签

jsf

jsf-2

primefaces