Javascript not executed in a JSF + Primefaces page?

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?

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

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

instead of <script> have you tried <h:outputScript> ? (btw, do you have any error in the js console?) — Valentin Jacquemin
– 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
– Luiggi Mendoza, Commented Oct 21, 2013 at 14:53
Thanks for both comments. I update with the trace of the console. — seinecle
– 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
– Daniel, Commented Oct 21, 2013 at 15:41

hanan Ahmed · Accepted Answer · 2013-10-21 18:43:44Z

4

First 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.com/2013/08/tip-of-day-including-jquery-script-in.html

answered Oct 21, 2013 at 18:43

hanan Ahmed

4423 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript not executed in a JSF + Primefaces page?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related