Javascript没有在JSF + Primefaces页面中执行？

Question

In this JSF page using Primefaces, I can't figure out why the javascript at the bottom of the page doesn't get called? 在这个使用Primefaces的JSF页面中，我无法弄清楚为什么页面底部的javascript不会被调用？

The function "initVisualization()" is contained in the progressbar1.js file loaded on top of the page. 函数“initVisualization（）”包含在页面顶部加载的progressbar1.js文件中。

Any hep would be appreciated! 任何肝脏将不胜感激！

<?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>

Trace of the console: 跟踪控制台：

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".

And by the way, the first lines of this js function contained in progressBar1.js: 顺便说一句，这个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...

Answer 1

First of all as Daniel said Remove your Java script from your page and include it in your Java script file 首先，Daniel表示从您的页面中删除Java脚本并将其包含在Java脚本文件中

secondly and most important when you use Jquery with primfaces you should place the <h:outputScript> at the End of the <h:body> instead of the <h:head> .This way it will be loaded after the PrimeFaces-supplied jQuery/UI is loaded. 其次，最重要的是当你使用Jquery和primfaces时，你应该将<h:outputScript>放在<h:body>的末尾而不是<h:head> 。这样它将在PrimeFaces提供的jQuery之后加载/ UI已加载。

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

Javascript没有在JSF + Primefaces页面中执行？

问题描述

1 个解决方案

解决方案1
4 已采纳 2013-10-21 18:43:44

Javascript没有在JSF + Primefaces页面中执行？

问题描述

1 个解决方案

解决方案1 4 已采纳 2013-10-21 18:43:44

解决方案1
4 已采纳 2013-10-21 18:43:44