如何使用JavaScript顯示/隱藏HTML元素

我正在嘗試使用JSF創建一個使用用戶名（顯示），角色（隱藏）和密碼（隱藏）的單獨表單。如何使用JavaScript顯示/隱藏HTML元素

首先，用戶輸入他/她的用戶名，然後點擊一個「驗證」按鈕。如果用戶名存在，則頁面必須顯示用戶名角色，密碼輸入的角色<h:SelectOneMenu>，並且還隱藏「驗證」按鈕。

中的作用和密碼輸入默認情況下通過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

你需要一些Ajax做這個username.exists-check live – Rick

您需要在窗體焦點和模糊處使用Ajax回調。使用jquery。使用回調你可以改變元素的類來釋放或使用。您需要使用不是模板渲染器，而是使用json響應包裝器。

來源

2017-07-29 06:21:51

首先，你需要決定是否要使用HTML5 with JSF或JSF全面吹（我會建議你使用後者）。

在解決您的問題時，您使用的是JSF在其生命週期中不知道的普通HTMLinput標籤。

..... 
     <!-- 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}"/> 
    .....

最後回答您的主要問題，增加這樣的功能，你應該在你附上f:ajaxh:commandButton組件這樣

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

和你selectOneMenu：

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

在您f:ajaxlistner指向一種方法將AjaxBehaviorEvent類型作爲參數。

的這裏關鍵是f:ajax的render屬性，因爲它指向一個或id部件id s表示應該是在視圖時Ajax調用retruns更新的空間分隔的列表。

還要注意的是JSF對組件提供id這麼務必註明你或給這對how to find components by id讀取的方式。

現在提供指引代碼示例：

你的小面：

 <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

@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; 
     } 
}

最後，我會爲你一個相當不錯的解釋性回答如何使用f:ajax。我希望這有助於。

來源

2017-07-30 09:32:40 Kaizen

如何使用JavaScript顯示/隱藏HTML元素

回答

相關問題