关于使用 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 相关文章推荐
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
js动态加载以及确定加载完成的代码
Jul 31 Javascript
JavaScript之自定义类型
May 04 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
js读写json文件实例代码
Oct 21 Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
Nov 20 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
ionic2中使用自动生成器的方法
Mar 04 Javascript
原生js生成图片验证码
Oct 11 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
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
php标签云的实现代码
2012/10/10 PHP
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
理解Javascript_10_对象模型
2010/10/16 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
python处理圆角图片、圆形图片的例子
2014/04/25 Python
在Python中关于中文编码问题的处理建议
2015/04/08 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
一套软件测试笔试题
2014/07/25 面试题
会计助理的岗位职责
2013/11/29 职场文书
安全生产演讲稿
2014/05/09 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
法人授权委托书范本
2014/09/17 职场文书
联谊活动总结范文
2015/05/09 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
Oracle 多表查询基本语法实例
2022/04/18 Oracle
Nginx如何配置根据路径转发详解
2022/07/23 Servers