如何使用 JavaScript 显示/隐藏 HTML 元素答案

【问题标题】：How to display/hide HTML elements using JavaScript如何使用 JavaScript 显示/隐藏 HTML 元素
【发布时间】：2018-01-05 03:39:43
【问题描述】：

我正在尝试使用 JSF 创建一个包含用户名（显示）、角色（隐藏）及其密码（隐藏）的登录表单。

首先，用户键入他/她的用户名，然后单击“验证”按钮。如果用户名存在，则页面必须显示角色<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>

这是我在托管用户 Sing-in bean 中的内容：

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 中显示/隐藏？

【问题讨论】：

你需要一些 Ajax 来做这个 username.exists-check live

标签： javascript html jsf

【解决方案1】：

首先你需要决定是使用HTML5 with JSF 还是JSF 完全成熟（我建议你使用后者）。

在解决您的问题时，您使用的是普通的 HTML input 标签，JSF 在其生命周期内不知道这些标签。

   .....
       <!-- 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:ajax 包含在您的 h: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:ajax listner 指向一个接受AjaxBehaviorEvent 类型作为参数的方法。

这里的关键是f:ajax 的render 属性，因为它指向 id 或空格分隔的组件列表 ids 应该是重新运行 Ajax 调用时在视图中更新。

另请注意，JSF 可以为组件提供ids，因此请务必指定您的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 的相当好的解释性答案。我希望这会有所帮助。

【讨论】：

【解决方案2】：

您需要在表单焦点和模糊上使用 Ajax 回调。使用 jQuery。使用回调，您可以将元素的类更改为免费或已使用。您需要使用的不是模板渲染器，而是 json 响应包装器。

【讨论】：