Hide p:messages after certain seconds

Question

How to make the messages to be hidden (for both onedit and oncancel or each alone) after a specified set of seconds with jsf primefaces ;

<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
<p:dataTable id="platform" var="platform" value="#{platformMB.platformList}" editable="true">  
   <p:ajax event="rowEdit" listener="#{platformMB.onEdit}" 
           update=":formConfig:messages"/>
   <p:ajax event="rowEditCancel" listener="#{platformMB.onCancel}" 
           update=":formConfig:messages"/>  
....

if you want to prevent the message from being showed add global=false to the ajax events — Nassim MOUALEK, Sep 04 '15 at 14:19
prevent ? No, make it disappear after few seconds after being shown — Chaibi Alaa, Sep 04 '15 at 14:21

BalusC · Accepted Answer · 2015-09-04T15:52:44.820

You can invoke a JS function on complete of PrimeFaces ajax request by hooking on the special pfAjaxComplete event.

$(document).on("pfAjaxComplete", function() {
    // ...
});

You can use JS setTimeout() to schedule a function to be invoked after n milliseconds.

setTimeout(function() {
    // ...
}, 1000);

You can use jQuery $.hide(), or nicer, $.slideUp() to hide a DOM element.

$(element).slideUp();

You of course don't want to hide them too soon. Let's presume that we start with a minimum timeout of 3 seconds as "warming up" time for the human eye and then account 200ms for each word in the message.

Now, let's put it all together:

$(document).on("pfAjaxComplete", function() {
    var $messages = $(".ui-messages div");

    if ($messages.length) {
        var wordCount = $messages.text().split(/\W/).length;
        var readingTimeMillis = 3000 + (wordCount * 200);

        setTimeout(function() {
            $messages.slideUp();
        }, readingTimeMillis);
    }
});

Excuse me if im too beginner .. but xhere do i put that ? Js script ? In the body ? — Chaibi Alaa, Sep 04 '15 at 15:38
Wherever you want as long as `$` is available in the context. Normal approach is to put JS code in a JS file which you then include in the HTML head. See also e.g. http://stackoverflow.com/questions/8367421 — BalusC, Sep 04 '15 at 15:39

Hide p:messages after certain seconds

1 Answers1