0

我正在使用 JSF2 和 Primefaces3.4.2 我在 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 页面的内容将显示在 centerContentPanel 中。但问题是：我在 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;
    }
}
4

1 回答 1

0

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>
于 2013-01-09T09:47:55.080 回答