关于使用 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 22 Javascript
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
js闭包实现按秒计数
Apr 23 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
Jun 08 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
浅谈Webpack多页应用HMR卡住问题
Apr 24 Javascript
Vuex的API文档说明详解
Feb 05 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
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
学习python (2)
2006/10/31 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
轻松掌握python设计模式之访问者模式
2016/11/18 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
python gdal安装与简单使用
2019/08/01 Python
python中adb有什么功能
2020/06/07 Python
Python之字典对象的几种创建方法
2020/09/30 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
设备动力科岗位职责范本
2014/02/23 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
地球一小时活动总结
2015/02/27 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫