我正在尝试使用 JSF 创建一个带有用户名(显示)、 Angular 色(隐藏)及其密码(隐藏)的登录表单。
首先，用户输入他/她的用户名，然后单击“验证”按钮。如果用户名存在，则页面必须显示 Angular 色的 <h:SelectOneMenu>使用用户名 Angular 色、密码输入并隐藏“验证”按钮。
Angular 色和密码输入默认通过 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>这是我的托管用户登录 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 中显示/隐藏？
最佳答案
首先您需要决定是否要使用 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 类型作为参数的方法。
The key here is the
renderattribute off:ajax, as it points to anidor a space separated list of componentids that should be updated in the view when the Ajax call retruns.
另请注意，JSF 有一种为组件提供 id 的方法，因此请务必指定您的 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 的相当好的解释性答案。 。我希望这有帮助。
关于javascript - 如何使用 JavaScript 显示/隐藏 HTML 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45384152/