Question

我在Primefaces3.4.2中使用JSF2我在layoutComplex.xhtml中创建了一个布局，如下所示：

     <!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>

是的，我可以动态更改centerContentPanel的源代码而无需刷新整个页面，只需刷新centerContentPanel，即点击layoutComplex.xhtml中的menuitem，然后colorPicker页面的内容将显示在centerContenPanel。但问题是：我在layoutComplex.xhtml头中添加了一个colorpicker.js，并希望它在更新centerContent时可以正常工作，但实际上，它不起作用.. 但按F5刷新所有页面后，它按预期正常工作。为什么？我怎样才能解决这个问题？以下是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>

和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;
    }
}

Answer 1

你也应该在ajax调用之后调用jscolor.init。似乎它在页面加载后被调用，需要在ajax调用之后或组件内部调用。您可以通过在colorPicker.xhtml文件中调用jscolor.init来实现此目的。

<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>

布局需要手动刷新。看起来它无法加载外部js

1 个答案: