doesn't display in the presence of jquery

2019-08-03 21:55发布

站内问答 / 前沿技术
914 1 6

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条回答
贪生不怕死
2楼-- · 2019-08-03 22:20

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?

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)