2016-04-29 4 views
3

は表示されません。ここでhttp://www.primefaces.org/showcase/ui/message/messages.xhtml首相が直面している - メッセージのツールヒントは、私は、この例のようにツールチップとしてエラーメッセージを表示したい

は、私のJSFコードスニペットです:ここで

<h:form id="loginForm"> 
    <p:messages id="messages" showDetail="true" closable="true" for="login"/> 
    <h:panelGrid columns="3" cellpadding="3" width="100%"> 
     <p:outputLabel for="username" value="Login: "/> 
     <p:inputText style="width: 100%;" value="#{loginBean.username}" required="true" id="username"/> 
     <p:message for="username" display="tooltip"/> 

     <p:outputLabel for="password" value="Password:"/> 
     <p:password style="width: 100%;" value="#{loginBean.password}" required="true" id="password"/> 
     <p:message for="password" display="tooltip"/> 
    </h:panelGrid> 
    <p:commandButton value="OK" action="#{loginBean.login()}" update="loginForm" style="float: right; margin-top: 5px;"/> 
</h:form> 

は、HTML出力スニペットですそこはっきり&入力は赤いアウトラインを持つツールチップのHTMLコードですが、

<tr> 
<td><label id="loginForm:j_idt9" class="ui-outputlabel ui-widget ui-state-error" for="loginForm:username">Login: <span class="ui-outputlabel-rfi">*</span></label></td> 
<td><input id="loginForm:username" name="loginForm:username" type="text" value="" style="width: 100%;" aria-required="true" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all ui-state-error" role="textbox" aria-disabled="false" aria-readonly="false"></td> 
<td><div id="loginForm:j_idt10" aria-live="polite" class="ui-message ui-helper-hidden ui-message-error ui-widget ui-corner-all"><span class="ui-message-error-icon"></span><span class="ui-message-error-detail">Login: Validation Error: Value is required.</span></div></td> 
</tr> 

ツールチップのメッセージはちょうど私がホーブたときに表示されません:ログイン行についてrを押します。フォームはダイアログウィンドウ内に配置されます。あなたは<h:body>...</h:body>ペアタグ内にこのスニペットを置く6.0.RC2

答えて

5

Primefaces、外部<h:form> ... </h:form>ペアのタグ:

<p:tooltip /> 


これは、私は、ソースコードだけで簡単のため、(一時的な仕事であります)そのプロパティ、メソッドを持つBeanを使用していない:

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:h="http://xmlns.jcp.org/jsf/html" 
     xmlns:ui="http://xmlns.jcp.org/jsf/facelets" 
     xmlns:f="http://xmlns.jcp.org/jsf/core" 
     xmlns:p="http://primefaces.org/ui"> 

    <h:head>   
    </h:head> 

    <h:body> 

     <p:tooltip /> 

     <h:form id="loginForm"> 
      <p:messages id="messages" showDetail="true" closable="true" for="login"/> 
      <h:panelGrid columns="3" cellpadding="3" width="100%"> 
       <p:outputLabel for="username" value="Login: "/> 
       <p:inputText style="width: 100%;" required="true" id="username"/> 
       <p:message for="username" display="tooltip"/> 

       <p:outputLabel for="password" value="Password:"/> 
       <p:password style="width: 100%;" required="true" id="password"/> 
       <p:message for="password" display="tooltip"/> 
      </h:panelGrid> 
      <p:commandButton value="OK" update="loginForm" style="float: right; margin-top: 5px;"/> 
     </h:form> 
    </h:body> 

</html> 


これは私のスクリーンショットです:

enter image description here

+1

これはトリックでした。彼らは実際にショーケースでこれをよりよく説明する必要があります。それは最初の例の一部のように見えます。 TY。 –

関連する問題