布局需要手动刷新.看起来无法加载外部js [英] Layout Needs Manual refresh. Looks like it can't load external js
问题描述
我将JSF2与Primefaces3.4.2一起使用，已在layoutComplex.xhtml中创建了一个布局，如下所示:
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>
是的，我可以动态更改centerContentPanel的来源，而无需刷新整个页面，而无需刷新centerContentPanel，即单击layoutComplex.xhtml中存在的menuitem时，然后colorPicker页面的内容将显示在centerContenPanel中.但是问题是:我在layoutComplex.xhtml头中添加了colorpicker.js，希望它在更新centerContent时可以工作，但是实际上，它不工作.. 但是在按F5刷新所有页面后，它可以正常工作.为什么?我怎样才能解决这个问题? 以下是colorPicker.xhtml:
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>
和NavigationBean.java
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;
}
}
推荐答案
您也应该在ajax调用之后调用jscolor.init.好像它是在页面加载后立即被调用的，需要在您的Ajax调用之后或在组件内部被调用.您可以通过像这样在colorPicker.xhtml文件中调用jscolor.init来实现此目的.
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>
这篇关于布局需要手动刷新.看起来无法加载外部js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
