How to hide after it displayed the messages?

Question

I am working on JSF application in primefaces in that i am showing an information to the user via .

So when the user click submit the

Answer 1

Worked for me for <p:fileUpload>, which was in <p:dataList> and <h:panelGrid> elements.

    <p:fileUpload...
           oncomplete="setTimeout(function() { $('[id$=mr-upload-messages]').hide(1000); }, 2000);">

...
    <p:messages id="mr-upload-messages" showDetail="true" showSummary="false" closable="true"/>

I have used jQuery $('[id$=mr-upload-messages]' to find id's which ends with mr-upload-messages, because Primefaces adds it's unique identifier at the beginning of id.

Answer 2

<p:messages id="msgs"> is ultimately rendered as <div id="msgs"> and its contents is then updated with the factual messages to the user.

If you want to clear the message screen after some delay you should use the JavaScript setTimeout function after ajax call has been completed:

<p:commandButton ... 
        oncomplete="setTimeout(function() { $('#msgs").html(''); }, 3000);" />

The second parameter of setTimeout function is the delay in milliseconds.

The other alternative is to use <p:growl> instead.

Answer 3

I came across the attention, and did it this way:

function hideMsg(){
$("#msg").delay(1000).hide(1000);
}

oncomplete="hideMsg()"

Answer 4

$('#msgs').html(''); immediately hide in 3 seconds but if you want to hide slowly as jquery hide method do this..

<p:commandButton ... 
        oncomplete="setTimeout(function() { $('#msgs').hide(1000); }, 3000);" />

hide(1000); hiding motion will be completed in 1 second