0
我使用的是Primefaces3.4.2我在layoutComplex.xhtml創建佈局如下JSF2：佈局需要手動刷新。看起來它不能加載外部JS
<!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;
}
}
你能後的js文件也？你在瀏覽器的javacript控制檯中看到錯誤嗎？你還可以添加如何從加載的xhtml文件中調用colorpicker.js函數？ – cubbuk
我更新了代碼並粘貼。首先從.../layoutComplex.jsf加載，然後我發現js工作正常，但是在單擊item和更新centercontent之後，另一個colorpicker inputbox會同時顯示但不工作。以前的colorpicker也可以工作... 我假設更新操作修改了DOM，因此活動綁定被重新評估。從而刷新整個頁面，可以正確識別ID。 – Vincent
在您的colorPicker xhtml中，您可以添加一個調用jscolor.init函數的腳本。好像jscolor只在窗口加載事件之後被初始化，並且在ajax調用結束後不會被調用。 – cubbuk