Primefacesダイアログ背景の不透明度がダイアログでアクションが失敗したときに倍になる

Question

ユーザーが編集ボタンをクリックするとレンダリングされるページモーダルダイアログがあります。ダイアログでユーザー名とパスワードを尋ね、送信ボタンがあります。ユーザー名とパスワードが検証されない場合、エラーが表示されます。

ユーザー名とパスワードが認証されないと、認証が失敗するたびにモーダルバックグラウンドが暗くなります。

何が原因でしょうか？

<p:dialog id="dialog" header="Login To Edit" widgetVar="dialog" visible="#{fundingBacker.loginVisible}" modal="true" 
    resizable="false" closable="false" draggable="true" rendered="#{!userBean.loggedIn}"> 
    <h:form> 

     <p:ajaxStatus style="width:16px;height:16px;"> 
      <f:facet name="start"> 
       <p:graphicImage value="../images/loading4.gif" /> 
      </f:facet> 
      <f:facet name="complete"> 
       <h:outputText value="" /> 
      </f:facet> 
     </p:ajaxStatus> 

     <p:messages autoUpdate="true" showDetail="true" /> 

     <h:panelGrid columns="2" cellpadding="5"> 

      <h:outputLabel for="lanId" value="LanID:" /> 
      <p:inputText value="#{currentUser.lanID}" id="lanId" required="true" label="lanId" requiredMessage="Lan ID is required" /> 

      <h:outputLabel for="password" value="Password:" /> 
      <p:password value="#{currentUser.password}" id="password" required="true" label="password" feedback="false" requiredMessage="Password is required" /> 

      <p:commandButton id="loginButton" value="Login" type="submit" styleClass="primaryButton" action="#{currentUser.performLogin}" update="dialog"/> 

     </h:panelGrid> 
    </h:form> 
</p:dialog> 

Answer 1

ダイアログを最初に閉じることなく、毎回ダイアログを更新しています。私はそれがバグか機能かどうか分かりませんが、visible属性のため、すべてのダイアログアップデートでオーバーレイが再初期化されます。もっとコンパクトなテストケースと共に、PrimeFacesの人にそれを報告したいかもしれません。

最も簡単な解決策は、Ajaxの成功に関するダイアログを閉じることです。エンドユーザが目を瞬きさせるよりも速く再表示されます。

<p:commandButton ... onsuccess="dialog.hide()" update="dialog" /> 

あなたはおそらく唯一のvisibleとrendered（ユーザーがまだログインしていないときなど）の検証が失敗したときにダイアログが再び開かれていることを確認する属性を微調整する必要があります。

代わりに、ダイアログの代わりにダイアログのフォームを更新することもできます。

<p:commandButton ... update="@form" /> 

または、その属性を完全に削除するだけです。既定値は@formです。

ログイン成功にダイアログを閉じる

<p:commandButton ... /> 

はその後RequestContext#execute()によって行うことができます。

RequestContext.getCurrentInstance().execute("dialog.hide()"); 

Answer 2

ダイアログボックスは、サーバーへの各リクエストの後に複製されています。ダイアログ属性（appendToBody="true"）を設定してください。これは、これが起こらないようにする必要があります。

Answer 3

これは3.1.Finalで修正されたバグでした。

http://code.google.com/p/primefaces/issues/detail?id=3426