How to fade a message out after a timeout

Question

I have a simple login page that displays a message if the login was not successful. I would like this message to fade out after 5 seconds, but I can't get it to work.

The login part (removed most of the irrelevant stuff):

<h:inputText title="Name" value="#{authBean.name}" id="username" />
<h:inputSecret title="Password" value="#{authBean.password}" id="password" />

<p:commandButton id="loginButton" action="#{authBean.loginAndRedirect}"
          update="@form" value="Login" />
<h:message id="messages" for="login:username" />

What I have tried so far:

The command entered in the Firebug command line works perfectly: $('[id$=messages]').fadeOut();

Now I need a way to trigger it by a timer:

setting a callback on the button like this does not work (no effect, no error):

<p:commandButton ... oncomplete="setTimeout(5000, '$('[id$=messages]').fadeOut())" ... />

I have tried it with onclick and oncomplete but with no effect and no errors.

Tried using primfaces effects (wrapped JQuery effects) on the message element:

<h:message id="messages" for="login:username" errorClass="errorMessage">
  <p:effect type="fadeout" event="load" delay="5000">
    <f:param name="mode" value="'hide'" />
  </p:effect>
</h:message>

no effect, no errors.

Answer 1

You're missing a function closure inside setTimeout(). Also, calling a function is better than using inline JavaScript. It's easier to read and debug.

E.g.

<p:commandButton ... oncomplete="fadeoutfunction()" ... />

with

function fadeoutfunction(){
 setTimeout(function(){
    $('[id$=messages]').fadeOut();
 },5000);
} 

Answer 2

<p:commandButton ... 
oncomplete="setTimeout(function(){$('[id$=messages]').fadeOut()},'5000')" ... />