个人中心
gpt4 book ai didi

javascript - TypeError : PF(. ..).hide 不是函数

转载 作者：行者123 更新时间：2023-11-30 11:11:05 30 4
gpt4 key购买 nike

我有这个简单的 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 is not a function”。我使用的是 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: {}, … 
}

最佳答案

测试时 show() 是否导致了同样的错误？很可能不会。至少当我在 online panel showcase 中测试它们时不是.

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

所以我查看了 documentation (假设版本 6.2)并注意到面板有:

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.

没有隐藏(也没有显示)事件/javascript 函数(它们通常是 1:1)。所以我尝试了 close() 并且它起作用了(和 show() 一样。

所以文档并不完整，但您的问题可能已经在那里找到(并且展示也有相应的示例!)。

show has close as counterpart(而不是 hide)或者 open 可以(应该)是 close 的对应物的事实有些不一致。请在他们的 github 中为此创建一个问题。

关于javascript - TypeError : PF(. ..).hide 不是函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53655453/

30 4 0
文章推荐： Javascript:如果满足条件则隐藏元素
文章推荐： java - 当 ComponentOrientation 设置为 RTL 时 JLabel 和 JTextField 之间的不一致
文章推荐： java - Google App Engine 上传多模块项目 - 配置错误 : XML error validating
文章推荐： javascript - 不用 Redux 管理状态
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com