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 相关文章推荐
javascript针对DOM的应用分析(二)
Apr 15 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
jquery实现图片平滑滚动详解
Mar 22 jQuery
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 Javascript
原生JS实现京东查看商品点击放大
Dec 21 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
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
php 删除cookie和浏览器重定向
2009/03/16 PHP
PHP SQLite类
2009/05/07 PHP
Views rows style模板重写代码
2011/05/16 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
Python获取任意xml节点值的方法
2015/05/05 Python
python3.5仿微软计算器程序
2020/03/30 Python
Python 实现一个颜色色值转换的小工具
2016/12/06 Python
Python Flask-web表单使用详解
2017/11/18 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
python处理RSTP视频流过程解析
2020/01/11 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
德国运动鞋网上商店:Afew Store
2018/01/05 全球购物
Unix控制后台进程都有哪些进程
2016/09/22 面试题
群教班子对照检查材料
2014/08/26 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
护士个人总结范文
2015/02/13 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书
深入解析MySQL索引数据结构
2021/10/16 MySQL