让 PrimeFaces 消息在 5 秒后消失

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>和一些 jQuery，以防出现非 ajax 消息。

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);
});