使PrimeFaces消息在5秒钟后消失 [英] Make PrimeFaces messages disappear after 5 seconds

问题描述

我的新任务是在出现5秒钟后消失PrimeFaces <p:messages>.我在PF的用户指南和他们的网页中都没有找到针对此设置的任何特定设置.我以为也许可以将JavaScript事件绑定到出现的<p:messages>，但不知道从哪里开始.

My new task is to have PrimeFaces <p:messages> dissappear after 5 seconds after appearing. I haven't found any specific setting for that in PF's user guide, nor on their webpage. I thought maybe I could bind an JavaScript event to <p:messages> appearing, but don't know where to start.

我的消息在模板中

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

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

and render such an empty <div> in DOM:

<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专用解决方案吗?

Does anyone know of a jQuery or Primefaces specific solution?

解决方案

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

I've found the combination of jQuery and <p:ajaxStatus> to be the solution to my problem. I've added:

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

我的<p:ajaxStatus>和一些jQuery，以防出现非ajax消息.

to my <p:ajaxStatus> and some jQuery in case of non ajax messages.

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！

Thanks for the lead BalusC!

推荐答案

您可以使用 <p:ajaxStatus> 来挂接ajax启动，完成，成功和错误事件.然后，您可以在邮件的slideUp()上触发setTimeout().

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

或更笼统地说，您也可以为此使用jQuery的 $.ajaxStop() .

Or, more generically, you could also use jQuery's $.ajaxStop() for this.

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

这篇关于使PrimeFaces消息在5秒钟后消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！