Javascript 未在 JSF + Primefaces 页面中执行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19497524/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript not executed in a JSF + Primefaces page?
提问by seinecle
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!
任何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>
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:
顺便说一下，progressBar1.js 中包含的这个 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...
回答by hanan Ahmed
First of all as Daniel said Remove your Java script from your page and include it in your Java script file
首先，正如丹尼尔所说，从您的页面中删除您的 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 一起使用时，您应该将 放在 the<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
