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

问题描述 投票：1回答：2

我有这个简单的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控制台中键入OF（'测试面板'），我得到：

Object { _super: undefined, cfg: {…}, id: "button_panel", jqId: "#button_panel",
   jq: Object(1), widgetVar: "testPanel", header: {…}, title: {…}, 
   content: Object(1), toggler: {}, … 
}
javascript primefaces
2个回答
3
投票

测试时，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中为此创建一个问题。

0
投票

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

在Chrome的控制台中输入：PF（'your_widgetvar_here'）然后输入一个句点，你将看不到show（）方法，但是如果添加.getJQ（），那么show方法就在那里。

其他方法也是如此，例如click（） - 存在同样的痛苦.....

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.