1

在这个使用 Primefaces 的 JSF 页面中，我无法弄清楚为什么页面底部的 javascript 没有被调用？

函数“initVisualization()”包含在页面顶部加载的 progressbar1.js 文件中。

任何 hep 将不胜感激！

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      >
    <h:head>
        <title>academiCV</title>
        <h:outputStylesheet name="css/otherpages.css" />
        <h:outputScript library="js" name="kinetic-v4.0.5.js" />
        <h:outputScript library="js" name="progressbar1.js" />
    </h:head>

    <h:body>
        <h:form id="formID" prependId="false">
            <p:remoteCommand name="launchSearch" action="#{progressBarMessenger.processCalls()}"/>
            <p:remoteCommand name="checkUpdates" action="#{progressBarMessenger.checkUpdates()}"/>
            <p:poll interval="1" update="text,counter" oncomplete="checkUpdates(); updateVisualization();"/>
            <h:inputHidden id="counter" value="#{progressBarMessenger.progressMessage}"/>

            <div style="margin-left: 50px;font-size: 130%;">

                <div id="container"></div>
                <h:panelGrid id="text">
                    <h:outputText id="txt" value="#{progressBarMessenger.returnMsg()}" escape="false"/>
                    <h:commandButton id="button1" value="Look at probable mistakes" action ="#{progressBarMessenger.getNextPage()}" rendered ="#{progressBarMessenger.toggleButtonCorrections}"/>
                    <h:commandButton id="button2" value="Let our algorithms do the corrections, go to the final result" action ="#{controllerBean.skipPairs()}" rendered ="#{progressBarMessenger.toggleButtonCorrections}"/>
                    <h:commandButton id="button3" value="Check the list of co-authors of #{controllerBean.getSearch().fullname}" action ="#{progressBarMessenger.getNextPage()}" rendered ="#{progressBarMessenger.toggleButtonFinalCheck}"/>
                    <h:commandButton id="button4" value="Open #{controllerBean.getSearch().fullname}" action ="#{progressBarMessenger.getNextPage()}" rendered ="#{progressBarMessenger.toggleButtonReport}"/>
                </h:panelGrid>
            </div>
        </h:form>

    </h:body>
    <script type="text/javascript">
        //<![CDATA[
        $(function(){
            initVisualization();

        }); //end ready
        //]]>
    </script>

</html>

控制台的痕迹：

Uncaught TypeError: Type error kinetic-v4.0.5.js?ln=js:4009
Kinetic.Shape.fill kinetic-v4.0.5.js?ln=js:4009
Kinetic.Rect.drawFunc kinetic-v4.0.5.js?ln=js:4505
Kinetic.Shape.draw kinetic-v4.0.5.js?ln=js:4348
Kinetic.Container.draw kinetic-v4.0.5.js?ln=js:2857
Kinetic.Layer.draw kinetic-v4.0.5.js?ln=js:3586
Kinetic.Stage.add kinetic-v4.0.5.js?ln=js:3171
initVisualization progressbar1.js?ln=js:63
(anonymous function) progressBar1.xhtml:22
bZ jquery.js?ln=primefaces:14
b7.fireWith jquery.js?ln=primefaces:14
bG.extend.ready jquery.js?ln=primefaces:14
aF jquery.js?ln=primefaces:14
TableManager::findTables() content.scripts.c.js:11
XHR finished loading: "http://localhost:8084/AcademiCV/faces/progressBar1.xhtml".

顺便说一下，这个js函数的第一行包含在progressBar1.js中：

var stage;
function initVisualization(){
    stage = new Kinetic.Stage({
        container: 'container',
        width: 1100,
        height: 500
    });

    var barsLayer = new Kinetic.Layer();
    var aLayer = new Kinetic.Layer();
    var bLayer = new Kinetic.Layer();
    var cLayer = new Kinetic.Layer();
    var dLayer = new Kinetic.Layer();

    var aRect = new Kinetic.Rect({
        x: 10,
        y: stage.getHeight() - 115 - 10,
        width: 245,
        height: 1,
        fill: 'green',
        //        stroke: 'black',
        //        strokeWidth: 0,
        name:'aBar'
    });
etc...
4

1 回答 1

4

首先，正如丹尼尔所说，从您的页面中删除您的 Java 脚本并将其包含在您的 Java 脚本文件中

其次也是最重要的，当您将 Jquery 与 primfaces 一起使用时，您应该将<h:outputScript>放在 End<h:body>而不是<h:head>. 这样的情况下，它将在 PrimeFaces 提供的 jQuery/UI 加载后加载。

看到这个http://jsfspotlight.blogspot.com/2013/08/tip-of-day-include-jquery-script-in.html

于 2013-10-21T18:43:44.203 回答