关于使用 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 相关文章推荐
通用JS事件写法实现代码
Jan 07 Javascript
基于JavaScript 类的使用详解
May 07 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
Jun 23 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
three.js中文文档学习之创建场景
Nov 20 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
layui自定义ajax左侧三级菜单
Jul 26 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+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
PHP实现文件上传与下载
2020/08/28 PHP
JavaScript 动态生成方法的例子
2009/07/22 Javascript
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
js 三级关联菜单效果实例
2013/08/13 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
详解python程序中的多任务
2020/09/16 Python
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
报到证丢失证明
2014/01/11 职场文书
大四自我鉴定
2014/02/08 职场文书
学校运动会霸气口号
2014/06/07 职场文书
检讨书1000字
2014/10/11 职场文书
结婚老公保证书
2015/02/26 职场文书
护士心得体会范文
2016/01/25 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
总结几个非常实用的Python库
2021/06/26 Python
Python标准库pathlib操作目录和文件
2021/11/20 Python