如何在超时后淡出消息

Question

我有一个简单的登录页面,如果登录失败,则会显示一条消息.我希望这个消息在5秒后淡出,但我无法让它工作.

登录部分(删除了大部分不相关的东西):

<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" />

到目前为止我尝试了什么:

在Firebug命令行中输入的命令完美地运行: $('[id$=messages]').fadeOut();

现在我需要一种通过计时器触发它的方法:

像这样在按钮上设置回调不起作用(没有效果,没有错误):

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

我已尝试过onclick,oncomplete但没有效果,没有错误.

尝试使用primfaces效果(包装JQuery效果)对message元素:

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

没有效果,没有错误.

Answer 1

你错过了一个function封闭内部setTimeout().此外,调用函数比使用内联JavaScript更好.它更容易阅读和调试.

例如

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

同

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