jsf中应用javascript
转载
一个常见的情况是在触发一个动作之前弹出一个确认对话框(例如:删除一条记录,取消编辑)。另一个常见的情况是在保存一些信息到服务器之前在客户端做验证,例如在传回服务器之前验证 password和Confirm password是否相等。
这篇文章描述了在<h:commandLink>和<h:commandButton>组件里如何触发客户端的java script功能。 <h:commandLink> 关联一个java script和一个commandLink并不困难,但是为了能够成功关联你需要理解jsf是怎样解析<h:commandLink>组件的。
下面的例子说明了<h:commandLink>是怎么被解析成HTML的:
<h:form id=”userForm”>
<h:commandLink id=”lnkDeleteUser” value=”delete” action=”#{userBean.deleteUser}”/>
</h:form>
<a href="#" οnclick= "clear_userForm();
document.forms['userForm'].elements['userForm:_link_hidden_'].value='userForm:lnkDeleteUser';
if (document.forms['userForm'].onsubmit){
if (document.forms['userForm'].onsubmit())
document.forms['userForm'].submit();
}
else {
document.forms['userForm'].submit();
}
return false; "
id="userForm:lnkDeleteUser">delete</a>
这里有几点需要注意:
1,<h:commandLink>被解析成了超级链接<a href/>。
2,这个超链接的href是"#";基本上是个无用的值。
3,JSF为这个超链接的'onclick'事件生成了一堆java script。忽略细节,它主要是调用 submit()函数来提交表单。
4,第三行比较有意思--这个组件的id (“userForm::lnkDeleteUser”) 被保存在了一个 hidden元素里。这也是jsf是如何知道哪个组件触发提交表单的操作并正确的调用 服务器端actions的关键。
大多数JSF组件允许我们为客户端的DHTML事件(比如onclick,ondoubleclick,onfocus等)注入java script的。但在<h:commandLink〉里JSF已经为onclick事件生成了相关的java script。下面的代码说明了如何在onclick事件里注入打开确认对话框的java script代码:
<h:form id=”userForm”>
<h:commandLink id=”lnkDeleteUser” value=”delete” onClick=”if (!confirm('Are you sure you want to delete this record?')) return false” action=”#{userBean.deleteUser}”/>
</h:form>
<a href="#" οnclick= "if (!confirm('Are you sure you want to delete this record?')) return false;
clear_userForm();
document.forms['userForm'].elements['userForm:_link_hidden_'].value='userForm:lnkDeleteUser';
if (document.forms['userForm'].onsubmit){
if (document.forms['userForm'].onsubmit())
document.forms['userForm'].submit();
} else {
document.forms['userForm'].submit();
}
return false; "
id="userForm::lnkDeleteUser">delete</a>
另外一个需要注意的重点是java script在任何情况下都不能返回true值。如果返回true值的话,浏览器将会执行<a href="#"/>-这只是指向了一个虚拟的页。 <h:commandButton> commandButton组件要相对简单一些,下面的脚本说明了如何加入一个确认对话框:
<h:commandButton id=”btnCancel” value=”Cancel” οnclick=”if (!confirm('You will lose all changes made. Are you sure?')) return false" />
<input id="userForm:btnCancel" name="userForm:btnCancel" type="submit" value="Cancel" οnclick=" if (!confirm('You will lose all changes made. Are you sure?')) return false; clear_userForm(); "/>
在这里的commandButton被解析成了一个提交按钮。如果java script返回true值这个表单会被提交,如果返回false将会忽略表单的提交。 在JSF里成功使用java script的关键是理解它是怎样被解析的。理解一些java script会更好。另外需要小心的是语法,因为大多数IDE都不支持java script的语法交验。如果你写了一个语法错误,例如少了一个打括号,代码将会简单的默默的执行失败:)
jsf中应用javascript相关推荐
- 在JSF中应用javascript(关于jsf的action与js的问题)
在提交表单前,我们往往需要进行一些客户端的验证或修改DOM动作,你可以这样使用javascript: 1.在form元素中添加onsubmit属性 <h:form οnsubmit=" ...
- jsf 自定义属性_如何在JSF中实现自定义密码强度指示器
jsf 自定义属性 使用JavaScript验证密码强度是一项常见任务. 在本文中,我将展示如何向基于JSF的Web应用程序添加密码强度指示器. 的 PrimeFaces中的密码组件已经具有密码强度的 ...
- js如何运行python代码_python中执行javascript代码
python中执行javascript代码: 1.安装相应的库,我使用的是PyV8 2.import PyV8 ctxt = PyV8.JSContext() ctxt.enter() func = ...
- 攻下《JavaScript高级程序设计》——第二章 在HTML中使用JavaScript
从上一章我们知道了,JavaScript是一种专门为网页交互而设计的脚本语言,那么,它就免不了和HTML打交道,所以在设计JavaScript的时候,Netscape首要面临的就是,怎么让HTML和J ...
- [译] ES6+ 中的 JavaScript 工厂函数(第八部分)
本文讲的是[译] ES6+ 中的 JavaScript 工厂函数(第八部分), 原文地址:JavaScript Factory Functions with ES6+ 原文作者:Eric Elliot ...
- 在js中加html_在HTML文档中嵌入JavaScript的四种方法
在HTML里嵌入JavaScript 在HTML文档里嵌入客户端JavaScript代码有4中方法: 1.内嵌,放置在标签之间 (少): 2.放置在有 3.放置自HTML事件处理程序中,该事件处理程 ...
- 如何在html中写javascript代码,如何在本地html代码中使用javascript脚本
我在jsfiddle中的代码正在工作,但是当我尝试在本地使用它时没有. 我不知道如何解决它,因为我认为代码是正确的. 我也尝试下载Jquery文件,并将其链接到代码中,但它不起作用.我确信这是一个愚蠢 ...
- JSF中的h:commandLink如何传递参数 三种取值比较
声明本人刚学jsf三天 如有不足请指教.... 本人总结了三种取得参数的方法 这是jsf中的代码 <h:commandLink action="#{}"> ...
- 通过属性值从对象数组中获取JavaScript对象[重复]
本文翻译自:Get JavaScript object from array of objects by value of property [duplicate] This question alr ...
最新文章
- java递归排雷_C语言实现扫雷小游戏
- vsim生成VCD波形文件(verilog)
- PXC 部署前置检查
- 注入域对象而不是基础结构组件
- linux的munit命令,LinuxUnit命令学习(三)
- 【Redis数据库】命令学习笔记——发布订阅、事务、脚本、连接等命令汇总
- oracle异构迁移,异构数据库系统迁移到Oracle 工具 - Oracle SQL Developer
- 时间字段加一秒_面试Java后端却问我时间轮(Time Wheel)算法,面试官没想到我看过Dubbo源码!...
- 14.2 movielens
- 互联网日报 | 美团外卖日订单量突破4000万个;《王者荣耀》动画番剧启动;360金融更名为360数科...
- 基于Python3.6配置开发环境
- 电影、酒店、外卖红包天天领
- 写题记录 cf G. Minimal Coverage 难度2200
- 企业资产盘点系统能做什么
- 最小生成树的prim算法(java)
- 关于使用fluxion工具破解wifi密码的详细教程
- 2019-2020-2 20175227张雪莹《网络对抗技术》 Exp2 后门原理与实践
- 开源数据同步备份工具(MySQL、Oracle、SqlServer、PostgreSQL)
- 大容量电池充放电管理模块MOSFET选型及应用
- 【ISCA'18】 Prediction based execution on Deep Neural Networks