JavaScript 访问 JSF 组件

先看下面的 JSF 页面：

<% ... @ page language="java" pageEncoding="UTF-8" %>

<% ... @ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<% ... @ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

< html >

< head >

< title > My JSF "login.jsp" starting page </ title >

< script type ="text/javascript" > ...

function isEmpty() ...{

var username = document.getElementById("formLogin:txtUsername").value;

var password = document.getElementById("formLogin:txtPassword").value;

if(username == "") ...{

alert("给老子输用户名！");

document.getElementById("formLogin:txtUsername").focus();

return false;

}

if(password == "") ...{

alert("不输密码你登录个铲铲！");

document.getElementById("formLogin:txtPassword").focus();

return false;

}

</ script >

</ head >

< body >

< center >

< f:view >

< h:form id ="formLogin" >

< div id ="input" >

< h:outputLabel value ="用户名：" />

< h:inputText value ="#" id ="txtUsername"

styleClass ="formText" />

< br >

< h:outputLabel value ="密码：" />

< h:inputSecret value ="#" id ="txtPassword"

styleClass ="formText" />

</ div >

< div id ="submit" >

< h:commandButton value ="提交" action ="#"

onclick ="return isEmpty();" styleClass ="formButton" />

< h:commandButton value ="重置" type ="button"

onclick ="javascript:document.getElementById("formLogin").reset();

document.getElementById("formLogin:txtUsername").focus();"

styleClass ="formButton" />

</ div >

</ h:form >

</ f:view >

</ center >

</ body >

</ html >

这个页面使用 JavaScript 来确认登录时用户名和密码是否为空，表单名为 formLogin ，两个输入组件名为 txtUsername 和 txtPassword ，当单击按钮时，将调用 JavaScript 函数 isEmpty() ，根据条件判断显示对话框或是提交表单。

要注意的是，不能在 JavaScript 函数中使用如下类似语法来访问表单组件：
document.formLogin.txtUsername.value;
而应使用：
document.getElementById("formLogin:txtUsername").value;
或者：
document.forms.formLogin["formLogin:txtUsername"].value;

这是因为 JSF 解释上面的 <h:form id="formForm">...</h:form> 一段时会生成如下代码：

< form id ="formLogin" method ="post" action ="/Project_Blog/login.faces"

enctype ="application/x-www-form-urlencoded" >

< div id ="input" >

< label > 用户名： </ label >

< input id ="formLogin:txtUsername" type ="text"

name ="formLogin:txtUsername" class ="formText" />

< br >

< label > 密码： </ label >

< input id ="formLogin:txtPassword" type ="password"

name ="formLogin:txtPassword" value ="" class ="formText" />

</ div >

< div id ="submit" >

< input type ="submit" name ="formLogin:_id2" value ="提交"

onclick ="return isEmpty();" class ="formButton" />

< input type ="button" name ="formLogin:_id3" value ="重置"

onclick ="javascript:document.getElementById("formLogin").reset();

document.getElementById("formLogin:txtUsername").focus();" class ="formButton" />

</ div >

< input type ="hidden" name ="formLogin" value ="formLogin" />

</ form >

JSF 产生的所有表单控件都有符合 formName:componentName 格式的名称，这里的 formName 表示控件的表单的名称，而 componentName 表示组件名称。如果没有指定 id 属性，则 JSF 框架会自动创建标识符，就象上面的 HTML 片段中的按钮一样。因此，要访问上面的用户名字段，必须使用下列方法：
document.getElementById("formLogin:txtUsername").value;

JavaScript 访问 JSF 组件相关推荐

AJAX+JSF组件实现高性能的文件上载
一. 引言基于浏览器的文件上传,特别是对于通过<input type="file">标签包含到Web页面来实现上传的情况,还存在较严重的性能问题.我们知道,超过10M ...
php继承exten,es6,extends_react中通过extend继承，父组件为什么能访问子组件的属性，es6,extends,react.js - phpStudy...
react中通过extend继承,父组件为什么能访问子组件的属性代码如下,在父类的componentWillMount方法中输出 this,打印的却是子类 item 通过webpack的编译后文件中 ...
html jsf ajax blur,是否可以使用JSF ajax更新非JSF组件（纯HTML）？
是否可以更新页面中不是JSF组件的部分? 否.待更新组件必须由提供UIViewRoot#findComponent(),以便JSF可以找到它们,对其进行调用encodeAll(),捕获生成的HTML输 ...
使用 Vanilla JavaScript 创建 Web 组件
Web 应用程序开发是一个非常拥挤的技术领域.有不同类型的框架.库和工具.在开发 Web 应用程序时,主要目标是提供带有封装组件的高质量用户界面 (UI). 因此,当您使用 React.Vue.Ang ...
2.JSF 2006年大事纪：Exadel携RichFaces加入JSF组件库竞赛
导读: Exadel无疑是2006年度JSF天空上最耀眼的明星之一.继年初以一款支持JSF的开发工具Exadel Studio一举攻下JSF可视化页面编辑器的城池之后,年中凭借Ajax4jsf又占领了 ...
angularjs1访问子组件_vue 组件通信看这篇就够了(12种通信方式)
vue 组件间的通信是 vue 开发中很基础也十分重要的部分,作为使用 vue 的开发者每天都在使用.同时,vue 通信也是面试中非常高频的问题,有很多面试题,都是围绕通信展开. 本文会介绍常见的通信 ...
linux访问网页元素,Linux_DOM和JAVASCRIPT访问页面上的元素，访问方法：getElementById() - phpStudy...
DOM和JAVASCRIPT访问页面上的元素访问方法: getElementById():返回拥用传递给该方法的指定id的第一个对象的引用. getElementsByName():返回拥用传递该方 ...
C#与Javascript变量、函数之间的相互调用2008年11月28日星期五 05:28 P.M.1.如何在JavaScript访问C#函数?
C#与Javascript变量.函数之间的相互调用 2008年11月28日星期五 05:28 P.M. 1.如何在JavaScript访问C#函数? 2.如何在JavaScript访问C#变量? 3 ...
开发自定义JSF组件(4) 保存状态与恢复状态
2019独角兽企业重金招聘Python工程师标准>>> 完整的教材: 开发自定义JSF组件(1) HelloWorld 开发自定义JSF组件(2) 使用Render渲染器开发自定义 ...

JavaScript 访问 JSF 组件

JavaScript 访问 JSF 组件相关推荐

最新文章

热门文章