关于使用 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 10 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
vue中mint-ui的使用方法
Apr 04 Javascript
微信小程序实现签到功能
Oct 31 Javascript
最简单的JS实现json转csv的方法
Jan 10 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 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
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
php正则表达式学习笔记
2015/11/13 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
javascript Keycode对照表
2009/10/24 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
Python使用OpenCV进行标定
2018/05/08 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
简单了解django索引的相关知识
2019/07/17 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
请用用Java代码写一个堆栈
2012/01/26 面试题
Linux面试题LINUX系统类
2014/11/19 面试题
如何清空Session
2015/02/23 面试题
中专生职业生涯规划书范文
2013/12/29 职场文书
简短证婚人证婚词
2014/01/09 职场文书
教育学习自我评价
2014/02/03 职场文书
护理不良事件检讨书
2014/02/06 职场文书
建筑工地大门标语
2014/06/18 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
Python学习之异常中的finally使用详解
2022/03/16 Python