5

ログインに失敗した場合にメッセージを表示するシンプルなログイン ページがあります。このメッセージを 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())" ... />

onclickand で試してみました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>

効果なし、エラーなし。

4

2 に答える 2

5

function内部にクロージャーがありませんsetTimeout()。また、関数の呼び出しは、インライン JavaScript を使用するよりも優れています。読みやすく、デバッグしやすくなります。

例えば

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

と

function fadeoutfunction(){
 setTimeout(function(){
    $('[id$=messages]').fadeOut();
 },5000);
}
于 2013-03-11T10:52:27.590 に答える
2 
<p:commandButton ... 
oncomplete="setTimeout(function(){$('[id$=messages]').fadeOut()},'5000')" ... />
于 2013-03-11T10:52:04.023 に答える