title: Javascript not executed in a JSF + Primefaces page?
body: <p>In this JSF page using Primefaces, I can't figure out why the javascript at the bottom of the page doesn't get called?</p>
  
  <p>The function "initVisualization()" is contained in the progressbar1.js file loaded on top of the page.</p>
  
  <p>Any hep would be appreciated!</p>
  
  <pre><code>&lt;?xml version='1.0' encoding='UTF-8' ?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:p="http://primefaces.org/ui"
        &gt;
      &lt;h:head&gt;
          &lt;title&gt;academiCV&lt;/title&gt;
          &lt;h:outputStylesheet name="css/otherpages.css" /&gt;
          &lt;h:outputScript library="js" name="kinetic-v4.0.5.js" /&gt;
          &lt;h:outputScript library="js" name="progressbar1.js" /&gt;
      &lt;/h:head&gt;
  
      &lt;h:body&gt;
          &lt;h:form id="formID" prependId="false"&gt;
              &lt;p:remoteCommand name="launchSearch" action="#{progressBarMessenger.processCalls()}"/&gt;
              &lt;p:remoteCommand name="checkUpdates" action="#{progressBarMessenger.checkUpdates()}"/&gt;
              &lt;p:poll interval="1" update="text,counter" oncomplete="checkUpdates(); updateVisualization();"/&gt;
              &lt;h:inputHidden id="counter" value="#{progressBarMessenger.progressMessage}"/&gt;
  
              &lt;div style="margin-left: 50px;font-size: 130%;"&gt;
  
                  &lt;div id="container"&gt;&lt;/div&gt;
                  &lt;h:panelGrid id="text"&gt;
                      &lt;h:outputText id="txt" value="#{progressBarMessenger.returnMsg()}" escape="false"/&gt;
                      &lt;h:commandButton id="button1" value="Look at probable mistakes" action ="#{progressBarMessenger.getNextPage()}" rendered ="#{progressBarMessenger.toggleButtonCorrections}"/&gt;
                      &lt;h:commandButton id="button2" value="Let our algorithms do the corrections, go to the final result" action ="#{controllerBean.skipPairs()}" rendered ="#{progressBarMessenger.toggleButtonCorrections}"/&gt;
                      &lt;h:commandButton id="button3" value="Check the list of co-authors of #{controllerBean.getSearch().fullname}" action ="#{progressBarMessenger.getNextPage()}" rendered ="#{progressBarMessenger.toggleButtonFinalCheck}"/&gt;
                      &lt;h:commandButton id="button4" value="Open #{controllerBean.getSearch().fullname}" action ="#{progressBarMessenger.getNextPage()}" rendered ="#{progressBarMessenger.toggleButtonReport}"/&gt;
                  &lt;/h:panelGrid&gt;
              &lt;/div&gt;
          &lt;/h:form&gt;
  
      &lt;/h:body&gt;
      &lt;script type="text/javascript"&gt;
          //&lt;![CDATA[
          $(function(){
              initVisualization();
  
          }); //end ready
          //]]&gt;
      &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Trace of the console:</p>
  
  <pre><code>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". 
  </code></pre>
  
  <p>And by the way, the first lines of this js function contained in progressBar1.js:</p>
  
  <pre><code>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...
  </code></pre>