Javascript Primefaces通知栏有选择地工作

我对Primefaces中的通知栏有一个奇怪的问题。 实际上，通知栏本身在页面加载时显示没有问题，用于打开/隐藏的按钮工作正常

问题在于JavaScript调用隐藏通知栏——它不起作用。即使我排除setTimeout并直接调用hide函数，它也不起作用。这种情况和用于显示条的按钮是一样的——按钮可以工作，但它不能从JavaScript工作

我检查了一下，如果我把警报放在JavaScript中，它会毫无问题地显示出来，这样函数就可以正常工作了

有什么想法吗

谢谢

    <h:form>

        ...

        <p:notificationBar position="top" effect="slide" 
                  styleClass="top" widgetVar="bar" autoDisplay="true">

           <p:commandButton id="barOff" onclick="PF('bar').hide()" 
                  type="button" icon="ui-icon-arrow-1-n"/>
           <h:outputText value="Some text" style="font-size:36px;" />

        </p:notificationBar>

        <p:commandButton id="barOn" value="Show" onclick="PF('bar').show()" 
                  type="button" icon="ui-icon-arrow-1-s"/>

     </h:form>


     <script type="text/javascript">

        function load() {
            setTimeout(close(), 3000);
        }

        function close() {
            document.getElementById('barOff').click();
        }

        document.getElementsByTagName('body')[0].onload = load();
    </script>

...
函数加载（）{
setTimeout（close（），3000）；
}
函数关闭（）{
document.getElementById（'barOff'）。单击（）；
}
document.getElementsByTagName（'body'）[0].onload=load（）；

barOn和barOff

位于命名容器中，因此要选择它们，您必须：

• 在其id前面加上命名容器id
• 将

  prependId=“false”

  添加到命名容器中（请参见下面的注释）

编辑：关于组件ID和UINamingContainer的注释 发件人：

渲染ID相对于父对象进行解析 组成部分。组件的示例包括：， ，等等。这些组件 使用其自己的客户端ID为其子级的客户端ID添加前缀

[……]

绝对呈现ID必须是前缀为的完整客户端ID ":". 因此，如果渲染目标本身嵌套在另一个 UINamingContainer组件，则需要给它一个固定的ID和 也包括它的ID

在UINamingContainer上使用

prependId=“false”

时，其内部组件的ID将按DOM中的方式呈现。这在某种程度上是一个应该避免的简单方法，因为它很容易导致DOM中意外地有多个具有相同ID的组件。最好使用完全限定的ID

考虑到这一预防措施，只需在表单中添加一个id，并将其用作前缀来限定其子组件：

<h:form id="notification-form">

或者简单地（不需要引用ID）：

另请参见：

按照@Zim的建议使用console.log（）后，我发现在页面加载时通知栏不可用-我得到了未定义的对象。使用setTimeout（）进行延迟后，通知栏开始打开。这种延迟可以小到10毫秒，甚至更少。它甚至可以处理1ms甚至0这样的值！现在，通知栏完全打开了

以下是按预期工作的修改代码：

<h:form id="forma">

    ...

    <p:notificationBar position="top" effect="slide"
                   styleClass="top" widgetVar="bar">

        <p:commandButton id="barOff" onclick="PF('bar').hide()" 
                         type="button" icon="ui-icon-arrow-1-n"/>

        <h:outputText value="Text!" style="font-size:36px;" />

   </p:notificationBar>


   <p:commandButton id="barOn" value="Show" onclick="PF('bar').show()" 
                  type="button" icon="ui-icon-arrow-1-s"/>

</h:form>

<script type="text/javascript">

        function load() {
            setTimeout(function() { open(); }, 10);
        }

        function open() {
            PF('bar').show();
            setTimeout(function() { close(); }, 6000);
        }

        function close() {
            PF('bar').hide();
        }

       document.getElementsByTagName('body')[0].onload = load();

</script>

...
函数加载（）{
setTimeout（函数（）{open（）；}，10）；
}
函数open（）{
PF（'bar'）.show（）；
setTimeout（函数（）{close（）；}，6000）；
}
函数关闭（）{
PF（'bar'）.hide（）；
}
document.getElementsByTagName（'body'）[0].onload=load（）；

在未解释其副作用的情况下，切勿向初学者推荐

prependId=“false”

。是一个更好的方法。我尝试了前缀，但它不起作用。表单的id是

Form

，所以我写

PF（':Form:bar'）.show（）和
PF（'form:bar'）.show（）和
PF（'bar'）.show（）并且它们都不工作。我是不是犯了什么错误。我甚至尝试了prependId（只是为了测试，我不是有意使用它），但它也不起作用。
PF（）
函数需要一个Primefaces组件
widgetVar
。无论如何，
PF（'bar'）
应该可以工作。您的浏览器控制台在页面加载时有什么提示吗？是时候开始调试了，比如
onload=“console.log（PF（'bar'））”
谢谢@Zim，console.log帮助我找到了问题的根源。它与setTimeout（）关联。我发布了一个答案。总之，我不明白为什么要进行所有这些Javascript初始化？如果希望在页面加载时显示
，请像在原始帖子中那样添加
autoDisplay=“true”
。否则，将其设置为
false
（或不设置）。我理解这一点，但我希望能够在页面加载后，但不是在秒数后打开通知栏。我可以添加
autoDisplay=“true”
并从JavaScript中删除“打开栏”部分，但这将在页面加载后直接显示栏。好的，如果需要延迟打开，这很有意义：）
function close() {
   PF('bar').hide();
}

<h:form id="forma">

    ...

    <p:notificationBar position="top" effect="slide"
                   styleClass="top" widgetVar="bar">

        <p:commandButton id="barOff" onclick="PF('bar').hide()" 
                         type="button" icon="ui-icon-arrow-1-n"/>

        <h:outputText value="Text!" style="font-size:36px;" />

   </p:notificationBar>


   <p:commandButton id="barOn" value="Show" onclick="PF('bar').show()" 
                  type="button" icon="ui-icon-arrow-1-s"/>

</h:form>

<script type="text/javascript">

        function load() {
            setTimeout(function() { open(); }, 10);
        }

        function open() {
            PF('bar').show();
            setTimeout(function() { close(); }, 6000);
        }

        function close() {
            PF('bar').hide();
        }

       document.getElementsByTagName('body')[0].onload = load();

</script>