如何使用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元素

回答

相关问题