title: PrimeFaces OverlayPanel causes JavaScript error "TypeError: f is undefined"
body: <p>I was trying to use the <code>&lt;p:overlayPanel&gt;</code> as a widget as described in PrimeFaces showcase example (<a href="http://www.primefaces.org/showcase/ui/overlay/overlayPanel.xhtml" rel="nofollow">http://www.primefaces.org/showcase/ui/overlay/overlayPanel.xhtml</a>).</p>
  
  <p>I built a simple app, but on page load it directly causes the JavaScript error <code>TypeError: f is undefined</code> at column 3, row 1457 in "/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&amp;v=5.1"</p>
  
  <p>The xhtml body code is:</p>
  
  <pre><code>&lt;h:form id="form"&gt; 
  
      &lt;p:commandButton update=":form:infoPanel" oncomplete="PF('testOverlayPanel').show('#{component.clientId}')" value="Test"/&gt;
  
      &lt;p:overlayPanel widgetVar="testOverlayPanel" dismissable="false" showCloseIcon="true"&gt;
          &lt;p:outputPanel id="infoPanel" style="text-align:center;"&gt;
              Hello OverlayPanel!
          &lt;/p:outputPanel&gt;
      &lt;/p:overlayPanel&gt;
  
  &lt;/h:form&gt;
  </code></pre>
  
  <p>When I removed the overlayPanel, the JavaScript error disappears.</p>
  
  <p>When I press the command button, two further JavaScript errors appear:</p>
  
  <ol>
  <li>NetworkError: 403 Forbidden - <a href="https://localhost:8443/test/index.xhtml" rel="nofollow">https://localhost:8443/test/index.xhtml</a></li>
  <li>TypeError: PF(...) is undefined</li>
  </ol>
  
  <p>I am using PrimeFaces 5.1 with JSF 2.2.8</p>