关于使用 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 内存回收机制理解
Jan 17 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
TypeScript 学习笔记之基本类型
Jun 19 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 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
ThinkPHP采用模块和操作分析
2011/04/18 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
PDO::rollBack讲解
2019/01/29 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
javascript之学会吝啬 精简代码
2010/04/25 Javascript
jquery插件制作 表单验证实现代码
2012/08/17 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
headjs实现网站并行加载但顺序执行JS
2016/11/29 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
为输入框加入数字js校验代码分享
2017/11/02 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
区域销售经理职责
2013/12/22 职场文书
酒店总经理岗位职责
2014/03/17 职场文书
保密承诺书
2014/03/27 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
会计工作岗位职责
2015/02/03 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
git中cherry-pick命令的使用教程
2022/06/25 Servers