JavaScriptを使用してHTML要素を表示/非表示にする方法

JSFを使用してユーザー名（表示）、役割（非表示）、パスワード（非表示）のシンクインフォームを作成しようとしています。JavaScriptを使用してHTML要素を表示/非表示にする方法

まず、ユーザーがユーザー名を入力し、「確認」ボタンをクリックします。ユーザー名が存在する場合、ページにはロールの<h:SelectOneMenu>がUsernameロール、パスワード入力とともに表示され、「検証」ボタンも非表示にする必要があります。

役割とパスワードの入力はCSSを経由して、デフォルトでは非表示になっています。ここ

<body> 
 
    <div class="container"> 
 
    <h:form styleClass="form-signin"> 
 
     <h2 class="form-signin-heading">SISE<br><small>Inicio de Sesión</small></h2> 
 
     <label for="inputEmail" class="sr-only">Nombre de Usuario</label> 
 
     <input type="text" id="inputEmail" class="form-control" placeholder="Nombre de usuario" required autofocus> 
 
     <br> 
 
     <h:commandButton styleClass="btn btn-lg btn-primary btn-block" value="Validar" action="#{beanInicioSesion.buscarUsuarioDB}" /> 
 
     <h:selectOneMenu styleClass="form-control hide"> 
 
     <f:selectItem itemLabel="Something" itemValue="Something"></f:selectItem> 
 
     </h:selectOneMenu> 
 
     <label for="inputPassword" class="sr-only">Contraseña</label> 
 
     <input type="password" id="inputPassword" class="form-control hide" placeholder="Contraseña" required> 
 
     <br> 
 
     <h:commandButton styleClass="btn btn-lg btn-primary btn-block hide" value="Iniciar sesión" /> 
 
    </h:form> 
 
    </div> 
 
</body>

は私が管理しているユーザ歌う-で豆に持っているものです。

public String buscarUsuarioDB() throws SISE_Exceptions, SQLException { 
 
    int usuarioValidado = 0; //validatedUser 
 
    UsuarioDB usrDB = new UsuarioDB(); 
 

 
    try { 
 
    usuarioValidado = usrDB.consultarUsuario(this.getNombreUsuario()); 
 
    if (usuarioValidado == 0) { 
 
     setMensaje("Usuario Invalido"); 
 
    } else { 
 
     setMensaje("Usuario Valido"); 
 
     //Valid user, then show/display the <h:selectOneMenu> and password input. 
 
    } 
 

 
    } catch (Exception e) { 
 
    // TODO: Add catch code 
 
    e.printStackTrace(); 
 
    } 
 
    return ""; 
 

 
}

問題は、buscarUsuarioDB（）メソッドからHTML要素を選択してJSP内で表示/非表示に設定するにはどうすればよいですか？

出典

2017-07-29 Jurgen Alfaro

あなたはusernameを実行するためにいくつかのAjaxが必要になります。 – Rick

フォームのフォーカスとボケには、Ajaxコールバックを使用する必要があります。 jqueryを使用します。コールバックを使用すると、要素のクラスを解放または使用するように変更できます。テンプレートレンダラーではなく、jsonレスポンスラッパーを使用する必要があります。

出典

2017-07-29 06:21:51

まず、HTML5 with JSFまたはJSFのフルブローンを使用するかどうかを決定する必要があります（後者を使用することをお勧めします）。

あなたの問題に対処するには、HTMLinputタグのライフサイクル中にわからない普通のタグを使用しています。

<h:selectOneMenu styleClass="form-control hide" id="selectOneMenu_id"> 
     <f:selectItem itemLabel="Something" itemValue="Something"/> 
</h:selectOneMenu>

あなた f:ajax

：あなたはあなたh:commandButtonコンポーネントでf:ajaxをこのよう

<h:commandButton id="submit" value="Submit"> 
     <f:ajax event="click" render="selectOneMenu_id" listener="#{backingbean.doSomething}"/> 
</h:commandButton>

とあなたのselectOneMenuを囲む必要があり、このような機能を追加するために、あなたの主な質問、に答える

..... 
     <!-- NO <label for="inputEmail" class="sr-only">Nombre de Usuario</label>-->   
     <!--YES--><h:outputLabel for="inputEmail" class="sr-only" value="Nombre de Usario"/>  
     <!--NO <input type="text" id="inputEmail" class="form-control" placeholder="Nombre de usuario" required autofocus>--> 
     <!--YES--><h:inputText id="inputEmail" class="form-control" required="true" value="#{backingBean.value}"/> 
    .....

最後にlistnerは、acc引数としてAjaxBehaviorEvent型を返す。

それは idやAjax呼び出しのretruns がビューで更新されなければならない部品id秒のスペースで区切られたリストを指すようここで重要なのは、f:ajaxのrender属性です。

もJSFはとてもあなたを指定したり、how to find components by idにこれに読み取りを与えるようにしてくださいコンポーネントに対してid秒を提供する方法を持っていることに注意してください。

今のガイドコードサンプル提供：

あなたのFacelets：iがどのようにかなり良い説明の答えにあなたを指します。最後

@ManagedBean 
@ViewScoped 
public class RenderBean{ 

    private boolean rendered = false; 



    //the backing bean method to handle the Ajax call 
    public void doSomething(AjaxBehaviorEvent event){ 
     //do a lot more with the event 
      rendered = true; 
     } 

    public boolean isRendered() { 
     return rendered; 
     } 

    public void setRendered(boolean rendered) { 
     this.rendered = rendered; 
     } 
}

 <h:inputLabel for="inputEmail" class="sr-only" value="Nombre de Usuario"/> 
     <h:inputText id="inputEmail" class="form-control" value="{renderBean.value}" reqired="true"/> 

     <h:commandButton id="submit" value="Submit"> 
      <!--f:ajax does the magic here and the two attributes that tells JSF what to do during and after the Ajax call to the server is made--> 
      <f:ajax event="click" render="selectOneMenu_id" listener="#{renderBean.doSomething}"/> 
     </h:commandButton> 


     <h:selectOneMenu id="selectOneMenu_id" styleClass="form-control hide" rendered="#{renderBean.rendered}"> 
     <f:selectItem itemLabel="Something" itemValue="Something"/> 
     </h:selectOneMenu>

とあなたのバッキングBeanをf:ajaxを使用してください。私はこれが助けて欲しい

出典

2017-07-30 09:32:40 Kaizen

JavaScriptを使用してHTML要素を表示/非表示にする方法

答えて

関連する問題