Question

我有一个简单的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>

但是，当我浏览到它并单击“隐藏”按钮时，在我的浏览器Javascript控制台中收到“ TypeError：PF（...）。hide不是函数”。我正在使用Primefaces 6.2，上面的JSF生成的HTML是：

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

我也检查了稍微相似的SO问题PrimeFaces TypeError: PF(...) is undefined，但似乎没有答案。因此，我将其发布在这里是基于其原因不同的假设。

如果我在JS控制台中键入PF（'testPanel'），我将得到：

Object { _super: undefined, cfg: {…}, id: "button_panel", jqId: "#button_panel",
   jq: Object(1), widgetVar: "testPanel", header: {…}, title: {…}, 
   content: Object(1), toggler: {}, … 
}

Answer 1

show()进行测试时是否引起了相同的错误？很有可能不会。至少当我在online panel showcase中测试它们时，还没有。

所以我知道页面没有问题，但调用的功能没有问题。有时，错误只是由组件实际上没有您尝试对其调用的javascript函数引起的。

因此，我查看了documentation（假定为6.2版），发现面板有：

Ajax行为事件

Panel提供了用于切换和关闭功能的自定义ajax行为事件。

Event Listener Parameter Fired

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

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

没有隐藏（也没有显示）事件/ javascript函数（通常是1：1）。因此，我尝试使用close()来代替它，（show()也是如此。

因此，文档尚未完全完成，但是您可能在此处找到了问题（展示柜中也有相应的示例！）。

事实展示与对方（而非隐藏）具有接近性，或者事实（与对手）接近（与公开相似）有些不一致。请为此在他们的github中创建一个问题。

Answer 2

要在widgetvar上调用javascript函数，您必须这样做： PF（'your_widgetvar_here'）。getJQ（）。show（）;

在Chrome的控制台中键入以下内容：PF（'your_widgetvar_here'）然后输入句点，您将不会看到show（）方法，但是如果添加.getJQ（），则show方法将在那里。

与其他方法（例如click（））相同-在那里痛苦相同.....

TypeError：PF（...）。hide不是函数

2 个答案: