Question

我在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>

Answer 1

barOn和barOff <p:commandButton>位于命名容器中，因此要选择它们，您必须：

使用命名容器ID
将prependId="false"添加到命名容器中（请参阅下面的注释）

编辑：关于组件ID和UINamingContainer 的注释来自BalusC's blog：

相对于父UINamingContainer解析渲染ID   零件。 UINamingContainer组件的示例为<h:form>，   <h:dataTable>，<ui:repeat>等。是那些组件   使用自己的客户端ID为其子级的客户端ID添加前缀。

[...]

绝对渲染ID必须是前缀为的完整客户端ID   ＆＃34;：＆＃34 ;.因此，如果渲染目标本身嵌套在另一个目标中   UINamingContainer组件，然后你需要给它一个固定的ID和   也包括其ID。

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

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

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

和

function close() {
   document.getElementById('notification-form:barOff').click();
}

或简单地（无需引用ID）：

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

另见：

UIForm with prependId="false" breaks <f:ajax render>

Answer 2

在@Zim建议使用 console.log（）后，我发现在页面加载时通知栏不可用 - 我得到 undefined 对象。使用 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>

Primefaces通知栏有选择地工作

2 个答案: