0

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

1 に答える 1

0

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