问题
I'm trying to display a primefaces schedule on a xhtml page but this doesn't work. As said in this question, i eliminated Components which uses Ajax and i noticed that when i commented the link referencing the jquery file the schedual is displayed and it works fine but of course other jquery stop to work and i also got the following JS error :
TypeError: b3 is undefined @ http://localhost:8080/theprojectname/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces:14
When i uncomment the link for the jquery reference file the schedual isn't displayed and i got 2 JS errors :
TypeError: this.jq.mask is not a function @ http://localhost:8080/theprojectname/javax.faces.resource/primefaces.js.xhtml?ln=primefaces:16
and :
TypeError: this.jqc.fullCalendar is not a function @ http://localhost:8080/theprojectname/javax.faces.resource/schedule/schedule.js.xhtml?ln=primefaces:1
This have happened with the PF version 4.3.1 and the 5.3.
This is my index.xhtml :
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html>
<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:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href="CSS/general.css" type="text/css" />
<link rel="stylesheet" href="CSS/jquery-ui-1.10.0.custom.min.css"
type="text/css" />
<!-- This is the jquery file reference link i've commented : -->
<!-- <script src="JS/jquery-1.8.3.js" /> -->
<script src="JS/jquery-ui-1.10.0.custom.js" />
<script src="JS/jquery.flip.js" />
<script src="JS/jquerygen.js" />
<title>my app</title>
<script>
//<![CDATA[
//]]>
</script>
</h:head>
<body>
<f:view>
<h:form id="form1">
<h:panelGroup id="windsarea" layout="block">
<h:panelGroup id="gesevntsincl" layout="block">
<p:growl id="messages" showDetail="true" />
<p:schedule id="schedule" value="#{scheduleController.eventModel}"
widgetVar="myschedule">
<p:ajax event="dateSelect"
listener="#{scheduleController.onDateSelect}"
update="eventDetails" oncomplete="eventDialog.show()" />
<p:ajax event="eventSelect"
listener="#{scheduleController.onEventSelect}"
update="eventDetails" oncomplete="eventDialog.show()" />
<p:ajax event="eventMove"
listener="#{scheduleController.onEventMove}" update="messages" />
<p:ajax event="eventResize"
listener="#{scheduleController.onEventResize}" update="messages" />
</p:schedule>
<p:dialog widgetVar="eventDialog" header="Event Details"
showEffect="clip" hideEffect="clip">
<h:panelGrid id="eventDetails" columns="2">
<h:outputLabel for="title" value="Title:" />
<p:inputText id="title" value="#{scheduleController.event.title}"
required="true" />
<h:outputLabel for="from" value="From:" />
<p:inputMask id="from"
value="#{scheduleController.event.startDate}" mask="99/99/9999">
<f:convertDateTime pattern="dd/MM/yyyy" />
</p:inputMask>
<h:outputLabel for="to" value="To:" />
<p:inputMask id="to" value="#{scheduleController.event.endDate}"
mask="99/99/9999">
<f:convertDateTime pattern="dd/MM/yyyy" />
</p:inputMask>
<h:outputLabel for="allDay" value="All Day:" />
<h:selectBooleanCheckbox id="allDay"
value="#{scheduleController.event.allDay}" />
<p:commandButton type="reset" value="Reset" />
<p:commandButton id="addButton" value="Save"
actionListener="#{scheduleController.addEvent}"
oncomplete="myschedule.update();eventDialog.hide();" />
</h:panelGrid>
</p:dialog>
</h:panelGroup>
</h:panelGroup>
<div id="tasksbar" />
<div id="startbutn" />
<h:panelGroup id="startmenudiv">
<h:panelGroup id="substartmenudiv" />
</h:panelGroup>
<div style="visibility: hidden;">
<BR />
<BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR />
<BR /> <BR /> <BR />
<BR /> <BR /> <BR /> <BR />
<BR /> <BR /> <BR /> <BR />
<BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR />
<BR /> <BR /> <BR />
<BR /> <BR /> <BR /> <BR />
<BR /> <BR /> <BR /> <BR />
<BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR />
<BR /> <BR /> <BR />
<BR />
</div>
<div id="loginbackground" />
<div id="logindivflip">
<div id="logindiv">
<br />
<div class="hidden" style="font-weight: 900;">Welcome,please
authentificate :</div>
<br />
<div class="hidden">
<h:outputText value="login :" />
<h:inputText class="rounded" value="#{userBean.login}" />
</div>
<br /> <br />
<div class="hidden">
<h:outputText value="password :" />
<h:inputText class="rounded" value="#{userBean.pwd}" />
</div>
<br /> <br />
<div class="hidden">
<span class="ebbtn"> <a id="logsubmitbtn" href=""
title="Reset" onclick="">Submit <f:ajax event="click"
execute="@this" listener="#{userBean.verifierUserDsLdap}" />
</a> <a id="resetbtn" href="" title="Reset" onclick="">Reset</a>
</span>
</div>
</div>
<div id="loginphoto" />
</div>
<p:remoteCommand name="addNewWindow"
actionListener="#{userBean.addNewWindow}">
<f:param name="windowname" />
</p:remoteCommand>
<p:remoteCommand name="updatewinstylprops"
actionListener="#{userBean.updatewinstylprops}">
<f:param name="windowid" />
<f:param name="top" />
<f:param name="left" />
<f:param name="width" />
<f:param name="height" />
</p:remoteCommand>
</h:form>
</f:view>
</body>
</html>
Does someone have a clue please?
回答1:
You should not include additionals jquerys into your pages, cause its already bundled with primefcaes...
Also , use h:outputScript instead of <script and h:outputStylesheet instead of link
So your js include should look like this (notice that I first included explicitly the jquery bundled with primefaces
<h:head>
<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
<h:outputScript name="JS/jquery.flip.js" target="head" />
<h:outputScript name="JS/jquerygen.js" target="head" />
place you JS folder under the resources folder in your WebContent folder
You should also read this What is the JSF resource library for and how should it be used?
来源：https://stackoverflow.com/questions/16257005/pschedule-doesnt-display-in-the-presence-of-jquery