CODEWITHSUNDEEP
jsf-2primefaces
kark
kark

Reputation: 4853

How to hide <p:messages> after it displayed the messages?

I am working on JSF application in primefaces in that i am showing an information to the user via <p:messages> .

So when the user click submit the page will processed and the p:messages dialog will triggered to show the information to the user ,

I referred Primefaces p:messages showcase Page

It is working fine..But after it displayed the messages , it is not closing automatically either we need to close that dialog manually or it remains in open stage.

I need it should it close automatically after it displayed the message to user... How can i do that ...Can anybody give suggestion that how can i do ?

Upvotes: 5

Views: 21173

Answers (4)

Mohsin AR
Mohsin AR

Reputation: 3108

$('#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

Upvotes: 1

Jonas Cardoso Dos Santos
Jonas Cardoso Dos Santos

Reputation: 1

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

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

oncomplete="hideMsg()"

Upvotes: -2

yyunikov
yyunikov

Reputation: 5907

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.

Upvotes: 3

skuntsel
skuntsel

Reputation: 11742

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

Upvotes: 8

Related Questions