关于使用 jBox 对话框的提交不能弹出问题解决方法


Posted in Javascript onNovember 07, 2012

jBox 是个不错的对话框组件。
在 ASP.NET Form 中使用 jBox 的时候,在按钮注册的客户端点击事件中,会发现不能弹出对话框问题。
表现为页面一闪就提交了,导致对话框一闪而过,甚至根本看不到。导致模式对话框失败。
首先,按钮会有默认处理,对于普通的 ASP.NET 按钮来说,会导致表单的提交,提交表单导致了页面的刷新。所以,为了不提交表单,就需要阻止按钮默认的行为,这可以通过下面的代码实现。

function stopDefault( e ) { 
// Prevent the default browser action (W3C) 
if ( e && e.preventDefault ) 
e.preventDefault(); 
else 
// A shortcut for stoping the browser action in IE 
window.event.returnValue = false; 
return false; 
}

其次,在关闭对话框的时候,我们希望能够提交表单,这也可以通过脚本来实现。就是调用表单对象的提交方法 submit();

在实现中,我们还需要找到控件的客户端标识,可以如下获取

var btnSaveId = "<%= this.btnSave.ClientID %>"; 
var form1Id = "<%= this.form1.ClientID %>";

按钮点击的客户端处理如下
// 注册按钮的点击事件处理 
$("#" + btnSaveId).click(function ( e ) { // 设置在关闭对话的时候提交表单 
var options = { 
closed: function () { 
alert("submit"); 
// 找到需要提交的表单 
$("#" + form1Id ).submit(); 
} 
}; 
// 显示 jBox 对话框 
var info = 'jQuery jBox<br /><br />版本:v2.0<br />日期:2011-7-24<br />'; 
info += '官网:<a target="_blank" href="http://kudystudio.com/jbox">http://kudystudio.com/jbox</a>'; 
$.jBox(info, options ); 
// 阻止默认的事件处理 
stopDefault(e); 
});

对于 jQuery 来说,在事件处理方法中返回 false 可以完成类似功能。

但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡,而且阻止了事件本身。
stopDefault 则只阻止默认事件本身,不阻止事件冒泡。
还可以阻止事件冒泡,这需要调用下面的方法。

function stopBubble(e) { 
// If an event object is provided, then this is a non-IE browser 
if (e && e.stopPropagation) 
// and therefore it supports the W3C stopPropagation() method 
e.stopPropagation(); 
else 
// Otherwise, we need to use the Internet Explorer 
// way of cancelling event bubbling 
window.event.cancelBubble = true; 
}
Javascript 相关文章推荐
现如今最流行的JavaScript代码规范
Mar 08 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
微信小程序云开发详细教程
May 16 Javascript
vue+高德地图写地图选址组件的方法
May 18 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 Javascript
seajs1.3.0源码解析之module依赖有序加载
Nov 07 #Javascript
Javascript引用指针使用介绍
Nov 07 #Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 #Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 #Javascript
JS正则中的RegExp对象对象
Nov 07 #Javascript
js模拟点击事件实现代码
Nov 06 #Javascript
js判断变量是否未定义的代码
Mar 28 #Javascript
You might like
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
PHP开发负载均衡指南
2010/07/17 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
cloudgamer出品ImageZoom 图片放大效果
2010/04/01 Javascript
Javascript表单验证要注意的事项
2014/09/29 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
python如何编写win程序
2020/06/08 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
巴西宠物商店:Cobasi
2019/04/19 全球购物
介绍一下Linux中的链接
2016/05/28 面试题
迟到检讨书800字
2014/01/13 职场文书
公司承诺书怎么写
2014/05/24 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
MySQL创建管理HASH分区
2022/04/13 MySQL