In this JSF page using Primefaces, I can't figure out why the javascript at the bottom of the page doesn't get called?
The function "initVisualization()" is contained in the progressbar1.js file loaded on top of the page.
Any hep would be appreciated!
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns=""
xmlns:h=""
xmlns:p=""
>
<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" onplete="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:mandButton id="button1" value="Look at probable mistakes" action ="#{progressBarMessenger.getNextPage()}" rendered ="#{progressBarMessenger.toggleButtonCorrections}"/>
<h:mandButton id="button2" value="Let our algorithms do the corrections, go to the final result" action ="#{controllerBean.skipPairs()}" rendered ="#{progressBarMessenger.toggleButtonCorrections}"/>
<h:mandButton id="button3" value="Check the list of co-authors of #{controllerBean.getSearch().fullname}" action ="#{progressBarMessenger.getNextPage()}" rendered ="#{progressBarMessenger.toggleButtonFinalCheck}"/>
<h:mandButton 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:
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...
In this JSF page using Primefaces, I can't figure out why the javascript at the bottom of the page doesn't get called?
The function "initVisualization()" is contained in the progressbar1.js file loaded on top of the page.
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/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml"
xmlns:h="http://java.sun./jsf/html"
xmlns:p="http://primefaces/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" onplete="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:mandButton id="button1" value="Look at probable mistakes" action ="#{progressBarMessenger.getNextPage()}" rendered ="#{progressBarMessenger.toggleButtonCorrections}"/>
<h:mandButton id="button2" value="Let our algorithms do the corrections, go to the final result" action ="#{controllerBean.skipPairs()}" rendered ="#{progressBarMessenger.toggleButtonCorrections}"/>
<h:mandButton id="button3" value="Check the list of co-authors of #{controllerBean.getSearch().fullname}" action ="#{progressBarMessenger.getNextPage()}" rendered ="#{progressBarMessenger.toggleButtonFinalCheck}"/>
<h:mandButton 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:
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...
-
1
instead of
<script>have you tried<h:outputScript>? (btw, do you have any error in the js console?) – Valentin Jacquemin Commented Oct 21, 2013 at 14:46 -
I haven't used the other JavaScript libraries you've included but seems like
$is getting overridden by one of them and not being the one used in jQuery shipped with PrimeFaces. – Luiggi Mendoza Commented Oct 21, 2013 at 14:53 - Thanks for both ments. I update with the trace of the console. – seinecle Commented Oct 21, 2013 at 15:15
-
@seinecle, to be on the safe side, remove the func call from your xhtml and instead add the following to your progressbar1.js file :
$(document).ready(function () { initVisualization(); });– Daniel Commented Oct 21, 2013 at 15:41
1 Answer
Reset to default 4First of all as Daniel said Remove your Java script from your page and include it in your Java script file
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.
see this http://jsfspotlight.blogspot./2013/08/tip-of-day-including-jquery-script-in.html