使PrimeFaces消息在5秒後消失

我的新任務是讓PrimeFaces <p:messages>在出現5秒後消失。我沒有在PF的用戶指南中找到任何具體的設置，也沒有在他們的網頁上找到。我想也許我可以綁定一個JavaScript事件到<p:messages>出現，但不知道從哪裏開始。使PrimeFaces消息在5秒後消失

我的郵件在模板：

<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！

來源

2013-11-21 Kuba

您可以使用<p:ajaxStatus>鉤住ajax啓動，完成，成功和錯誤事件。然後您可以在消息的slideUp()上觸發setTimeout()。

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

或者更一般地說，您也可以使用jQuery的$.ajaxStop()這個。

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

來源

2013-11-21 21:14:21 BalusC

''主意很好，事情就是，我正在使用''作爲等待符號。通常我也使用'global =「false」'爲了不顯示wait.gif - 在這種情況下，''解決方案將不起作用。有時我使用''作爲問候語（例如在登錄時），這些事件不是ajax。 – Kuba

使PrimeFaces消息在5秒後消失

回答

相關問題