Question

我的新任务是让PrimeFaces <p:messages>在出现后5秒后消失。我没有在PF的用户指南中找到任何具体的设置，也没有在他们的网页上找到。我想也许我可以将JavaScript事件绑定到<p:messages>出现，但不知道从哪里开始。

我的消息在模板中：

<p:messages id="messages" globalOnly="true" autoUpdate="true" closable="true" rendered="#{not suppressMessages}" />

在DOM中呈现这样一个空的<div>：

<div id="messages" class="ui-messages ui-widget" aria-live="polite"></div>

并且已满：

<div id="messages" class="ui-messages ui-widget" aria-live="polite">
  <div class="ui-messages-info ui-corner-all">
   <a class="ui-messages-close" onclick="$(this).parent().slideUp();return false;" href="#">
   <span class="ui-messages-info-icon"></span>
    <ul>
      <li>
       <span class="ui-messages-info-summary">Sample info message</span>
      </li>
    </ul>
  </div>
</div>

有没有人知道jQuery或Primefaces特定的解决方案？

解决方案

我发现jQuery和<p:ajaxStatus>的组合可以解决我的问题。我添加了：

<p:ajaxStatus onstart="PF('statusDialog').show()" onsuccess="setTimeout(function() { $('.ui-messages').slideUp(); }, 5000); PF('statusDialog').hide();" />

到我的<p:ajaxStatus>和一些非jjax消息的jQuery。

jQuery(document).ready(function() { 
    if(!$.trim($(".ui-messages").html())==''){
       //console.log("messages found");
       setTimeout(function() {$('.ui-messages').slideUp();}, 5000);
   } else {
       //console.log("messages not found");
   }    
});

感谢领导BalusC！

Answer 1

您可以使用<p:ajaxStatus>挂钩ajax启动，完成，成功和错误事件。然后，您只需在setTimeout()条消息上发送slideUp()。

<p:ajaxStatus oncomplete="setTimeout(function() { $('.ui-messages').slideUp(); }, 5000)" />

或者，更一般地说，你也可以使用jQuery的$.ajaxStop()。

$(document).ajaxStop(function() {
    setTimeout(function() {
        $('.ui-messages').slideUp();
    }, 5000);
});

使PrimeFaces消息在5秒后消失

1 个答案: