1

I have this simple SSCCE:

<?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://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Test</title>
    </h:head>
    <h:body>
        <p:panel id="button_panel" widgetVar="testPanel" closable="true" toggleable="true">
            <h1>Testing</h1>
        </p:panel>

        <p:commandButton onclick="PF('testPanel').show()" value="Show Panel" type="button"/>

        <p:commandButton onclick="PF('testPanel').hide()" value="Hide Panel" type="button"/>
    </h:body>
</html>

But when I browse to it and click the hide button I receive "TypeError: PF(...).hide is not a function" in my browsers Javascript console. I am using Primefaces 6.2 and the HTML generated by JSF above is:

<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head id="j_idt2">
    <link type="text/css" rel="stylesheet"
    href="/AnnotateImages/javax.faces.resource/theme.css.xhtml?ln=primefaces-aristo" />
    <link type="text/css" rel="stylesheet"
    href="/AnnotateImages/javax.faces.resource/fa/font-awesome.css.xhtml?ln=primefaces&amp;v=6.2" />
    <link type="text/css" rel="stylesheet"
    href="/AnnotateImages/javax.faces.resource/components.css.xhtml?ln=primefaces&amp;v=6.2" />
    <script type="text/javascript"
    src="/AnnotateImages/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&amp;v=6.2">
    </script>
    <script type="text/javascript"
    src="/AnnotateImages/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&amp;v=6.2">
    </script>
    <script type="text/javascript"
    src="/AnnotateImages/javax.faces.resource/core.js.xhtml?ln=primefaces&amp;v=6.2">
    </script>
    <script type="text/javascript"
    src="/AnnotateImages/javax.faces.resource/components.js.xhtml?ln=primefaces&amp;v=6.2">
    </script>
    <script type="text/javascript">
    if(window.PrimeFaces){PrimeFaces.settings.locale='en_GB';}</script>
    <title>Test</title>
  </head>
  <body>
    <div id="button_panel"
    class="ui-panel ui-widget ui-widget-content ui-corner-all"
    data-widget="testPanel">
      <div id="button_panel_content"
      class="ui-panel-content ui-widget-content">
        <h1>Testing</h1>
      </div>
      <input type="hidden" id="button_panel_collapsed"
      name="button_panel_collapsed" value="false" />
      <input type="hidden" id="button_panel_visible"
      name="button_panel_visible" value="true" />
    </div>
    <script id="button_panel_s" type="text/javascript">
    PrimeFaces.cw("Panel","testPanel",{id:"button_panel",toggleable:true,toggleSpeed:500,collapsed:false,toggleOrientation:"vertical",toggleableHeader:false,closable:true,closeSpeed:500});</script>
    <button id="j_idt6" name="j_idt6"
    class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
    onclick="PF('testPanel').show()" type="button">
      <span class="ui-button-text ui-c">Show Panel</span>
    </button>
    <script id="j_idt6_s" type="text/javascript">
    PrimeFaces.cw("CommandButton","widget_j_idt6",{id:"j_idt6"});</script>
    <button id="j_idt7" name="j_idt7"
    class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
    onclick="PF('testPanel').hide();" type="button">
      <span class="ui-button-text ui-c">Hide Panel</span>
    </button>
    <script id="j_idt7_s" type="text/javascript">
    PrimeFaces.cw("CommandButton","widget_j_idt7",{id:"j_idt7"});</script>
  </body>
</html>

I have also checked the slightly similar SO question PrimeFaces TypeError: PF(...) is undefined but none of the answers seem to apply. Therefore I am posting this here under the assumption that it has a different cause.

If I type PF('testPanel') in my JS console I get:

Object { _super: undefined, cfg: {…}, id: "button_panel", jqId: "#button_panel",
   jq: Object(1), widgetVar: "testPanel", header: {…}, title: {…}, 
   content: Object(1), toggler: {}, … 
}
Kukeltje
  • 12,223
  • 4
  • 24
  • 47
Ralph
  • 279
  • 5
  • 18
  • Can you add several links to things you tried **and** state why they did not help? Saves us investigating too much. – Kukeltje Dec 06 '18 at 16:15
  • if you type `PF('widgetVar')` in the browser developer console? What do you see then? And are you sure the html is generated by the xhtml? The title is different? – Kukeltje Dec 06 '18 at 16:28
  • Updated the title and given answer to your question in comment at the bottom of question. – Ralph Dec 06 '18 at 16:38
  • Also I've tried wrapping panel and buttons in an h:form and that made no difference. – Ralph Dec 06 '18 at 16:48

2 Answers2

3

When testing did the show() cause the same error? Most likely not. At least not when I tested them in the online panel showcase.

And so I knew there was nothing wrong with the page but with the functions called on them. Sometimes the error just is caused by the component actually not having the javascript functions you try to call on them.

So I looked in the documentation (assuming version 6.2) and noticed the panel has:

Ajax Behavior Events

Panel provides custom ajax behavior events for toggling and closing features.

Event Listener Parameter Fired

toggle org.primefaces.event.ToggleEvent When panel is expanded or collapsed.

close org.primefaces.event.CloseEvent When panel is closed.

There is no hide (and no show) event/javascript function (they most often are 1:1). So I tried close() instead and it worked (as does show().

So the documentation is not fully complete, but your issue could have been found in there (and the showcase has a corresponding example too!).

The fact show has close as as counterpart (and not hide) or that open could (should) be the counterpart of close is somewhat not consistent. Please create an issue for this in their github.

Community
  • 1
  • 1
Kukeltje
  • 12,223
  • 4
  • 24
  • 47
  • Fantastic - many thanks! I had copied the code from another example instead of using the API docs directly hence my mistake. – Ralph Dec 06 '18 at 16:59
  • You are welcome. The documentation and showcase are there for a reason. Maybe not always 100%, but never the less... – Kukeltje Dec 06 '18 at 17:22
0

To invoke javascript functions on a widgetvar you have to do it this way: PF('your_widgetvar_here').getJQ().show();

type in Chrome's console this: PF('your_widgetvar_here') then enter a period, you won't see a show() method, but if you add .getJQ() then the show method would be there.

same for other methods such as click() -- being there with the same pain.....

JoseA
  • 189
  • 1
  • 3
  • 8
  • No... This is not true. Functions ON widgets are PrimeFaces functions and doing something completely different then jq functions. Yes, you'll get sort of the same errors when calling funtions that don't exist. But OP was talking about PrimeFaces functions – Kukeltje Feb 25 '19 at 22:14