jQuery UI的Dialog无法提交问题的解决方法


Posted in Javascript onJanuary 11, 2011

具体表现为:
1.提交按钮失效,点击后无任何反应。
2.即便是使用其它手段使页面产生提交,服务器端也无法取到Dialog中的表单数据。

原因:JQuery会把Dialog的元素append到Body里面,而不是form里面。研究了页面源码后发现,jQuery UI Dialog控件初始化时动态生成的HTML元素被添加到页面的尾部、form元素的后面,而原始的Dialog模板部分(其内包含表单元素)也被移到了 动态生成的HTML元素内。也就是说,原先在form内的表单在Dialog初始化后就被移到form外了,这就导致了Dialog模板内表单全部失效。

第1种方法:
不知jQuery UI的Dialog这样设计是一项功能还是一个bug。为了在Dialog内实现正常的页面提交,根据上述分析,我找到一个简单的解决办法——在 jQuery UI控件的“open”事件处理程序中将Dialog控件动态生成的HTML元素移到form元素内,代码如下:
使用代码:$("#dialog").parent().appendTo("/html/body/form[0]");
或者
$("#dlg").dialog({
open: function () {
$("body > div[role=dialog]").appendTo("form#aspnetForm");
}
});
代码中的“aspnetForm”是ASP.NET应用程序自动生成的当前页面form元素ID,使用时你可以换成自己页面的form ID。

第2种方法:
加入一个<div id="dialog_target"></div>这样的DIV,然后把Dialog写入这个DIV里面。
$("#dialog").parent().appendTo("#dialog_target");

第3种方法:
1、修改Dialog的JS代码,把代码添加到form中,而不是body里面
2、Dialog内部的自定义HTML不使用,而直接加入一个IFRAME,把里面的HTML移到另外的页面中,再与父页面进行交互就OK(我使用的就是这种方法,这样这些独立出来的代码还可以复用

第2种方法,服务器事件可以响应,效果也不错,可以优先考虑。

Javascript 相关文章推荐
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
Mar 06 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
Nov 09 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 Javascript
5种 JavaScript 方式实现数组扁平化
Oct 05 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 #Javascript
Jquery中获取iframe的代码
Jan 11 #Javascript
基于jQuery的message插件实现右下角弹出消息框
Jan 11 #Javascript
基于jquery的cookie的用法
Jan 10 #Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 #Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 #Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 #Javascript
You might like
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
php删除左端与右端空格的方法
2014/11/29 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
js获取页面及个元素高度、宽度的代码
2016/04/26 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
浅谈python中的变量默认是什么类型
2016/09/11 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
Django之模型层多表操作的实现
2019/01/08 Python
python 三元运算符使用解析
2019/09/16 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
Python 中Operator模块的使用
2021/01/30 Python
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
护士感人事迹
2014/05/01 职场文书
讲解员培训方案
2014/05/04 职场文书
村班子对照检查材料
2014/08/18 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
初中班长竞选稿
2015/11/20 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python